Howto: div with onclick inside another div with onclick javascript
Question
just a quick question. I'm having a problem with divs with onclick javascript within each other. When I click on the inner div it should only fire it's onclick javascript, but the outer div's javascript is also being fired. How can the user click on the inner div without firing the outer div's javascript?
<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
<div onclick="alert('inner');" style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
12 answers
solution1
91 ACCPTED 2010-03-05 07:29:13
Basically there are two event models in javascript. Event capturing and Event bubbling . In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
solution2
18 2010-03-05 07:18:09
Check out the info on event propagation here
In particular you'll want some code like this in your event handlers to stop events from propagating:
function myClickHandler(e)
{
// Here you'll do whatever you want to happen when they click
// now this part stops the click from propagating
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
solution3
6 2014-04-17 15:47:10
只需添加此代码：
window.event.stopPropagation();
solution4
5 2010-03-05 07:17:26
return false; from the inner div's onclick function:
<div onclick="alert('inner'); return false;" ...
What you're dealing with is called event propagation .
solution5
3 2010-03-05 07:21:39
This is a case of event bubbling.
You can use
e.cancelBubble = true; //IE
and
e.stopPropagation(); //FF
solution6
3 2012-02-23 00:08:22
基于webkit的浏览器的另一种方法：
<div onclick="alert('inner'); event.stopPropagation;" ...
solution7
0 2012-08-03 07:42:52
This was very helpful, but it didn't work for me.
What i did is described here .
So I put a condition to the outer onclick event:
if( !event.isPropagationStopped() ) {
window.location.href = url;
}
solution8
0 2010-03-05 07:33:45
这里有一些参考资料可以帮助您理解javascript事件冒泡。
solution9
0 2015-04-22 12:04:44
You can use
$("divOrClassThatYouDontWantToPropagate").click(function( event ) { event.stopPropagation(); });
solution10
0 2010-07-24 16:27:20
你有两个'div'和三个'/ div'。
solution11
0 2018-04-19 06:33:26
This worked for me in Jquery:
$('#outer_element').click(function(event) {
if(event.target !== event.currentTarget) return;
alert("Outer element is clicked")
});
This way, if the current target is not the same as the outer div, it will do nothing. You can implement normal functions on the child elements.
solution12
0 2022-10-07 02:07:33
//Using window.event.stopPropagation(), the parent div wont be clicked when the child div is clicked
//HTML
<div onclick="parent_func()">
<div onclick="child_func()"></div>
</div>
//JS
function parent_func(){
window.event.stopPropagation();
console.log('Parent')
}
function child_func(){
window.event.stopPropagation();
console.log('Child')
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.