Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Lightbulb Stopping an onclick link on a div inside the linked div

    Hello everyone!

    First of all let me introduce myself as this is my first post on the coding forums! My name's Tom, I live in Sheffield, England and I'm 21 years old.

    Anyway, I have a little problem on a project I'm working on. I have a div set with an onclick link (onclick="location.href='http://www.google.com/';"). Thats not the problem, that works fine. The problem I'm having is that I then have another div inside this div that I don't want to be linked at all but the outer div's link seems to still be active on the inner one.

    Does anyone have any idea how to stop the link on the inner div whilst still keeping the outer div linked?

    Thanks alot for any help,
    Regards,
    Tom.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    I don't know of a way to stop the event propagation from the inner to the outer div with only the onclick attribute.

    In all modern browsers you can use addEventListener instead. With the help of the implicit event object parameter you can stop the event propagation from the inner to the outer div
    Code:
    document.getElementById('outer').addEventListener('click', function(e) {
      alert('triggered');
    }, false);
    
    document.getElementById('inner').addEventListener('click', function(e) {
      e.stopPropagation();
    }, false);
    Example: http://jsbin.com/udujen

  • Users who have thanked devnull69 for this post:

    tomsace (03-02-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the help, using your code I managed to do what I needed, I put your code inside an onclick on the div, like this:

    Code:
    <div onclick="this.addEventListener('click', function(e) { location.href='http://www.google.com/'; }, false);">
    It all works nicely, except for some reason, you need to double click the outer div for it to take you to the next page, any ideas why this is happening?

    Thanks alot,
    Regards,
    Tom.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    You are assigning an onclick event handler to the element. So on click it will execute the code string. Inside this code string you are assigning another click event handler to the same element that will only fire after the next click.

    There is no need for the onclick attribute when using addEventListener. You'll have to attach the event listener after page load and maybe take care of some legacy browsers
    Code:
    window.onload = function() {
       var inner = document.getElementById('inner');
       var outer = document.getElementById('outer');
       if(window.addEventListener) {
          inner.addEventListener('click', eventHandlerInner, false);
          outer.addEventListener('click', eventHandlerOuter, false);
       } else {
          inner.attachEvent('onclick', eventHandlerInner);
          outer.attachEvent('onclick', eventHandlerOuter);
       }
    };
    
    function eventHandlerOuter() {
       location.href = "http://www.google.com";
    }
    
    function eventHandlerInner(e) {
       if(!e) e=window.event;
       e.preventDefault();
    }

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks alot for all your help, got it working perfectly.

    Just one thing, is this method good in only new(ish) browsers or does it work as far back as say IE6 etc..

    Regards,
    Tom.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by tomsace View Post
    Thanks alot for all your help, got it working perfectly.

    Just one thing, is this method good in only new(ish) browsers or does it work as far back as say IE6 etc..

    Regards,
    Tom.
    For it to work in IE8 and earlier you need to use the Internet Explorer equivalents attachEvent and cancelBubble for those browsers

    See http://javascriptexample.net/events01.php for code to combine addEventListener and attachEvent

    and see http://javascriptexample.net/events03.php for code to combine stopPropogation and cancelBubble
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

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