SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS eventListener problem

    Hi,

    I have trouble with the following script:
    Code:
    <div id="div1" style="width: 300px; height: 300px; background: #ccc;">test
    
    	<div id="div2" style="width: 150px; height: 150px; background: lime;"></div>
    
    </div>
    
    
    <script language="javascript" type="text/javascript">
    
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    
    div1.addEventListener( "click", showDiv1, false );
    div2.addEventListener( "click", showDiv2, false );
    
    function showDiv1( evt ) { 
       alert ('DIV1');
    }
    
    function showDiv2( evt ) { 
       alert ('DIV2');
    	return false;
    }
    
    </script>
    As you can see there are 2 divs nested. Each of them have a eventListener
    with a click function. For testing I just have a simple alert box. When I
    click on div1 I get 1 alert box call. Do I click on div2 unfortunately my
    browser shows me alertbox with div2 and afterwards the box with div1.
    Actually I tought to solve this with "return false". But that isn't working
    Any idea how to prevent the "double action"?

    thx
    TC

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    When you're using the traditional event registration, such as div1.onclick=... then the return false works as per normal.

    In this particular case you are using addEventListener which has a different set of rules.
    See http://www.quirksmode.org/js/events_order.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this page. I grasp it but not completely. Might have to do that I'm
    not a native english speaker However, would you be so kind and tell me
    what kind of code I and where I have to add it to prevent this "double event
    behaving"? Thanks!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The "Turning it off" section takers you how to disable the default azction for both the Microsoft model and the W3C model.

    It appears that you're using the W3C model for your code, so you will want to disable the default action with code like the following:

    Code javascript:
    evt.stopPropagation();

    You would use the following if you were using the Microsoft model (assuming that you have at some stage said evt = window.event

    Code javascript:
    window.event.cancelBubble();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •