SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ignore OnClick Event

    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.

    Code:
    <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. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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>
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •