[thelist] Trapping JS events

Peter-Paul Koch gassinaumasis at hotmail.com
Thu Jul 3 03:12:21 CDT 2003

>I have a div that contains a form element. Both have onMouseDown handlers.  
>When I click on the form element, both handlers get fired, first the form 
>element handler, then the containing DIV handler.
>Here is a code snippet :
><div id="myContainer" onmousedown="alert('Second Event')">
>     <input type="text" value="" id="myFormField" onmousedown="alert('First 
>When I click on the input box, I get an alert for First Event, then one for 
>Second Event.   Is there a way I can have the form element event handler 
>trap the mouse click so that the containing DIV event handler doesn't get 

It can be done, but I'm not sure how to do it. You have to stop the event 
bubbling upwards. So when the first event handler script has finishes, it 
should use the stopPropagation() method (W3C) or the cancelBubble property 
(MS) to stop the bubbling. I don't have a coding example, though, so you'll 
have to find out for yourself.

ppk, freelance web developer
Interactie, copywriting, JavaScript, integration
Column "Keep it Simple": http://www.digital-web.com/columns/keepitsimple/
New: Forms, usability and the W3C DOM:

STOP MORE SPAM with the new MSN 8 and get 2 months FREE* 

More information about the thelist mailing list