Ignore OnClick Event

JavaScript
1

Hello

I am in the process of making an update to an existing site for an inventory list page. The list page displays all products for a category. When the user clicks anywhere on the table row (<TR>), there is an onclick event which takes the user to the inventory details page for that item. What I am trying to do is add a video link on the list page. When the user clicks on the “Play Video” link, I have a new browser window open and a video plays in the new window. This works great except for one issue… clicking the “Play Video” link also causes the user to go to the inventory details page. How could I have the onclick event for the table row take the user to the inventory details page unless the user clicks on the Play Video link?

Thanks. Any feedback is appreciated.


<html>
<body>

<table border ="1" width="100%">
  <tr onClick="alert('On Click');">
    <td>
	   <a href="javascript: alert('Play Video');">Play Video</a>
	</td>
  </tr>
</table>

</body>
</html>
2 
<table width="100%">
  <tr onClick="alert('On Click');">
    <td>
	   <a href="#" id='vidLink'>Play Video</a>
    </td>
  </tr>
</table>

<script type='text/javascript'>

document.getElementById( 'vidLink' ).onclick = function ( e )
{
  var evt = e || window.event;

  evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;

  evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;

  alert('Play Video');  /* Your code here */
}
</script>
3

Thank you very much for the feedback and I learned about stopPropagation and preventDefault. My assumption with these commands is that they do not last past there execution meaning they do not impact other functions that are called. I am supplying the code below just to make sure my implementation did not cause any new issues. I did execute the code in both IE and Firefox but since I have more than 1 link on a page, I needed the JavaScript function to be specific for each video link.


<html>

<head>
<script type='text/javascript'>

function testing(event, videoURL) {
	var evt = event || window.event;

	//-- Causes events to buggle up, a href goes first
	evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
	//-- Prevents other events from firing
	evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;

	alert( videoURL );
}

</script>
</head>

<body>

<table border ="1" width="100%">
  <tr onClick="alert('On Click');">
    <td>
	   <a href="" onclick="testing(event, 'videoURL 1');" id="vidLink">Play Video 1</a>
	</td>
  </tr>
  <tr onClick="alert('On Click');">
    <td>
	   <a href="" onclick="testing(event, 'videoURL 2');" id="vidLink">Play Video 2</a>
	</td>
  </tr>
</table>

</body>
</html>