ansaurus

Question

How to stop onclick event in div from propagating to the document?

Answer 1

A:

Add the onclick to the body element.

Aaron Harun 2010-06-19 18:07:52

Answer 2

+4 A:

Change your function definition to include the event:

function showMenu(event, element) {
  alert("div clicked");
  // Don't propogate the event to the document
  if (event.stopPropagation) {
      event.stopPropagation();   // W3C model
  } else {
      event.cancelBubble = true; // IE model
  }
}

Then change the call to pass in the event:

div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>

Hooray Im Helping 2010-06-19 18:17:40

Terrific! I tried your fix and it works! Thank you so much.A follow-up, if you please. I had spent hours searching and reading quirksmode and chapters of books and couldn't find this answer anywhere. Where does the authoritative reference state that the first argument of an event handler is the event? (Is "event" a reserved keyword here?)

douglas.kramer 2010-06-19 18:44:41

It doesn't have to be the first argument. The order is determined by the event setup in the HTML, e.g. if you used `onclick="showMenu(this, event);"` then the second argument would be the event data.

Ben Voigt 2010-06-19 18:52:02

What Ben said :)

Hooray Im Helping 2010-06-19 19:01:54

Great! So it appears 'event' is a reserved argument, like 'this'.I'm still curious what website is the authoritative reference for the event parameter. I've looked at w3c.org and mozilla.

douglas.kramer 2010-06-19 20:03:08

A good place to start: http://javascript.crockford.com/

Hooray Im Helping 2010-06-20 00:39:04

This answer I wrote to a related question is relevant: http://stackoverflow.com/questions/2196299/why-the-subtle-cross-browser-differences-in-event-object

Tim Down 2010-06-20 23:38:15

Thanks, Tim, that's helpful.Hooray, I'm actually looking for the definitive reference that states that event is a reserved identifier passed into event handlers, not some developer's handbook.BTW, I looked at crockford, but it says "Some browsers pass an event object to event handlers as a parameter. Microsoft chose instead to put the event object in a global event variable." On the contrary, I have code where IE 7 does accept an event passed to an event handler.

douglas.kramer 2010-06-23 17:58:10

Hooray Im Helping 2010-06-23 19:43:56

Answer 3

+1 A:

Try EventListeners:

html:

<div id="fooddmenu">Click inside this div</div>or click outside the div.

js:

function showMenu(e) {
    alert("div clicked");
}

document.onclick = function() {
    alert('document clicked');
};

window.onload = function(){
    document.getElementById("fooddmenu").addEventListener("click", function(e){
        showMenu(this);
        e.stopPropagation();

    });
};

digitalFresh 2010-06-19 18:43:46

Thank you. This is a clean alternative.

douglas.kramer 2010-06-19 20:17:12

Answer 4

A:

$("div").click(function(){
  ...
  ...
  ...

  return false; //this will stop the further propagation of the event
});

Ashit Vora 2010-06-20 03:59:29

I looked into this, and it seems "return false" does NOT stop further propagation of the event. It simply prevents the default action from taking effect, which is different. For example, if you click on a link, "return false" would prevent the browser from following the link, but would not prevent the event from bubbling up to the document where it could fire document.click=function() {alert("hi");};

douglas.kramer 2010-06-23 18:15:57

Answer 5

A:

Douglas, It does stop the event from getting bubbled up.

Check this out http://jsbin.com/ahoyi/edit

here, if you comment the alert statement, it will show 2 alerts on clicking the smaller box else only one.

Hope this helps.

Ashit Vora 2010-06-27 20:23:26

Thanks for showing me that. I"m unclear what the dollar sign '$' does. I tried replacing it with document.getElementById("parent") but that give an error: "Object #<an HTMLDivElement> has no method 'click'"

douglas.kramer 2010-06-28 15:38:50

Answer 6

A:

well, that's a jquery code. $("#id") same as document.getElementById("id")

.click function is same as addEvent("click", function() { ... } );

so basically both the functions there are click handlers for Parent and Child DIVs.

Observe the output by commenting / uncommenting the "return false;" statement.

Hope that helps.

By the way, sorry for that "$" confusion.

Ashit Vora 2010-06-28 19:06:52

ansaurus

tags:

views:

answers:

How to stop onclick event in div from propagating to the document?

related questions