blocks|key|1218306|text|将onclick添加到body元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1218307|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Add the onclick to the body element.

blocks|key|1004029|text|更改函数定义以包含事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1004030|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
++}
}|code-block|syntax|javascript|1004031|然后将调用更改为在事件中传递：|1004032|div+id="fooddmenu"+onclick="showMenu(event,+this);">Click+inside+this+div</div>|1004033|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Change your function definition to include the event:

<pre><code>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
 }
}
</code></pre>

Then change the call to pass in the event:

<pre><code>div id="fooddmenu" onclick="showMenu(event, this);"&gt;Click inside this div&lt;/div&gt;
</code></pre>

blocks|key|1218407|text|试试EventListeners：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1218408|html：|1218409|<div+id="fooddmenu">Click+inside+this+div</div>or+click+outside+the+div.​​​​​​​​​​|code-block|syntax|javascript|1218410|js：|1218411|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();

++++});
};|1218412|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Try EventListeners:

html:

<pre><code>&lt;div id="fooddmenu"&gt;Click inside this div&lt;/div&gt;or click outside the div.​​​​​​​​​​
</code></pre>

js:

<pre><code>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();

 });
};
</code></pre>

blocks|key|1004060|text|$("div").click(function(){
++...
++...
++...

++return+false;+//this+will+stop+the+further+propagation+of+the+event
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1004061|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("div").click(function(){
 ...
 ...
 ...

 return false; //this will stop the further propagation of the event
});
</code></pre>

blocks|key|1218501|text|道格拉斯，它确实阻止了活动的泡沫化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1218502|请查看此http://jsbin.com/ahoyi/edit|offset|length|1218503|在这里，如果您注释了alert语句，它将在单击较小的框时显示两个警告，而只显示一个警告。|1218504|希望这能有所帮助。|1218505|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ahoyi/edit^0|0|4|R|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

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

Check this out <a href="http://jsbin.com/ahoyi/edit" rel="nofollow noreferrer">http://jsbin.com/ahoyi/edit</a>

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

Hope this helps.

blocks|key|1218539|text|这是一段jquery代码。$("#id")与document.getElementById("id")相同|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1218540|点击函数与addEvent(“.click”，function()+{+...+})相同；|1218541|因此，基本上这两个函数都是父DIVs和子DIVs的点击处理程序。|1218542|通过注释/取消注释"return+false;“语句来观察输出。|1218543|希望这能有所帮助。|1218544|顺便说一句，很抱歉造成了"$“的混淆。|1218545|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

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.

I want to stop propagation of this div's onclick event to the document? When the user click on the "div", both alerts appear: 1) the div's alert and 2) the document's alert. I want to suppress the document alert.

I know how to do it using addEventListener, but is there another way to to do it? The problem below is that I don't know how to get ahold of the event -- I tried "event = element.onclick", shown below, but that doesn't work. How do I get the event?

<pre><code>&lt;head&gt;
&lt;script&gt;
 function showMenu(element) {
 alert("div clicked");
 event = element.onclick; // HOW TO GET HOLD OF THE EVENT?
 // Don't propogate the event to the document
 if (event.stopPropagation) {
 event.stopPropagation(); // W3C model
 } else {
 event.cancelBubble = true; // IE model
 }
 }

 document.onclick = function() {
 alert('document clicked');
 };
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;div id="foodmenu" onclick="showMenu(this);"&gt;Click inside this div&lt;/div&gt;
 or click outside the div.
&lt;/body&gt;
</code></pre>

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

我想要停止将此div的onclick事件传播到文档？当用户单击"div“时，两个警报都会出现: 1) div的警报和2)文档的警报。我想抑制文档警报。我知道如何使用addEventListener来做这件事，但是有没有其他方法呢？下面的问题是我不知道如何获取事件--我尝试了"event = element.onclic...

问如何停止div中的onclick事件传播到文档？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何停止div中的onclick事件传播到文档？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何停止div中的onclick事件传播到文档？
EN