Child element click event trigger the parent click event
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Say you have some code like this:
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');">
</div>
</div>
</body>
</html>
I don't want to trigger the parentDiv click event when I click on the childDiv, How can I do this?
Updated
Also, what is the execution sequence of these two event?
javascript jquery dhtml
edited Oct 7 '16 at 20:39
CDspace
2,40982835
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
add a comment |
Say you have some code like this:
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');">
</div>
</div>
</body>
</html>
I don't want to trigger the parentDiv click event when I click on the childDiv, How can I do this?
Updated
Also, what is the execution sequence of these two event?
javascript jquery dhtml
edited Oct 7 '16 at 20:39
CDspace
2,40982835
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
3
this is called event bubbling,A good point to start :- stackoverflow.com/questions/4616694/…
– Pranav
Dec 20 '12 at 6:55
The title of this question should be "Stop child event click from trigger parent click event" It reads as the opposite.
– Iwnnay
Oct 4 '18 at 16:14
add a comment |
Say you have some code like this:
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');">
</div>
</div>
</body>
</html>
I don't want to trigger the parentDiv click event when I click on the childDiv, How can I do this?
Updated
Also, what is the execution sequence of these two event?
javascript jquery dhtml
edited Oct 7 '16 at 20:39
CDspace
2,40982835
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
Say you have some code like this:
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');">
</div>
</div>
</body>
</html>
I don't want to trigger the parentDiv click event when I click on the childDiv, How can I do this?
Updated
Also, what is the execution sequence of these two event?
javascript jquery dhtml
javascript jquery dhtml
edited Oct 7 '16 at 20:39
CDspace
2,40982835
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
edited Oct 7 '16 at 20:39
CDspace
2,40982835
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
edited Oct 7 '16 at 20:39
CDspace
2,40982835
edited Oct 7 '16 at 20:39
CDspace
2,40982835
edited Oct 7 '16 at 20:39
CDspace
2,40982835
2,40982835
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
asked Dec 20 '12 at 6:51
Joe.wangJoe.wang
5,1221778142
5,1221778142
3
this is called event bubbling,A good point to start :- stackoverflow.com/questions/4616694/…
– Pranav
Dec 20 '12 at 6:55
The title of this question should be "Stop child event click from trigger parent click event" It reads as the opposite.
– Iwnnay
Oct 4 '18 at 16:14
add a comment |
3
this is called event bubbling,A good point to start :- stackoverflow.com/questions/4616694/…
– Pranav
Dec 20 '12 at 6:55
The title of this question should be "Stop child event click from trigger parent click event" It reads as the opposite.
– Iwnnay
Oct 4 '18 at 16:14
3
3
this is called event bubbling,A good point to start :- stackoverflow.com/questions/4616694/…
– Pranav
Dec 20 '12 at 6:55
this is called event bubbling,A good point to start :- stackoverflow.com/questions/4616694/…
– Pranav
Dec 20 '12 at 6:55
The title of this question should be "Stop child event click from trigger parent click event" It reads as the opposite.
– Iwnnay
Oct 4 '18 at 16:14
The title of this question should be "Stop child event click from trigger parent click event" It reads as the opposite.
– Iwnnay
Oct 4 '18 at 16:14
add a comment |
5 Answers
5
active
oldest
votes
You need to use event.stopPropagation()
Live Demo
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
event.stopPropagation()
Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
edited Nov 22 '18 at 3:01
crifan
4,70411716
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
5
if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv
– tsveti_iko
Aug 16 '16 at 13:08
add a comment |
Without jQuery : DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
add a comment |
I faced the same problem and solve it by this method.
html :
<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>
JS:
$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});
function childEvent(){
alert("child event");
}
function parentEvent(){
alert("paren event");
}
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
add a comment |
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).
Syntax:
Here is the simple syntax to use this method:
event.stopPropagation()
Example:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
add a comment |
Click event Bubbles, now what is meant by bubbling, a good point to starts is here.
you can use event.stopPropagation(), if you don't want that event should propagate further.
Also a good link to refer on MDN
edited May 23 '17 at 11:47
Community♦
11
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f13966734%2fchild-element-click-event-trigger-the-parent-click-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to use event.stopPropagation()
Live Demo
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
event.stopPropagation()
Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
edited Nov 22 '18 at 3:01
crifan
4,70411716
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
5
if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv
– tsveti_iko
Aug 16 '16 at 13:08
add a comment |
You need to use event.stopPropagation()
Live Demo
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
event.stopPropagation()
Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
edited Nov 22 '18 at 3:01
crifan
4,70411716
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
5
if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv
– tsveti_iko
Aug 16 '16 at 13:08
add a comment |
You need to use event.stopPropagation()
Live Demo
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
event.stopPropagation()
Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
edited Nov 22 '18 at 3:01
crifan
4,70411716
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
You need to use event.stopPropagation()
Live Demo
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
event.stopPropagation()
Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
edited Nov 22 '18 at 3:01
crifan
4,70411716
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
edited Nov 22 '18 at 3:01
crifan
4,70411716
edited Nov 22 '18 at 3:01
crifan
4,70411716
edited Nov 22 '18 at 3:01
crifan
4,70411716
4,70411716
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
answered Dec 20 '12 at 6:52
AdilAdil
127k17172188
127k17172188
5
if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv
– tsveti_iko
Aug 16 '16 at 13:08
add a comment |
5
if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv
– tsveti_iko
Aug 16 '16 at 13:08
5
5
if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv
– tsveti_iko
Aug 16 '16 at 13:08
if you have 2 separate handlers for the parent and the child click events and you want to trigger only the child handler by click event on the child, you have to call the event.stopPropagation() on the childDiv, not on the parentDiv
– tsveti_iko
Aug 16 '16 at 13:08
add a comment |
Without jQuery : DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
add a comment |
Without jQuery : DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
add a comment |
Without jQuery : DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
Without jQuery : DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
answered Dec 20 '12 at 6:55
Akhil SekharanAkhil Sekharan
9,37352949
9,37352949
add a comment |
add a comment |
I faced the same problem and solve it by this method.
html :
<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>
JS:
$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});
function childEvent(){
alert("child event");
}
function parentEvent(){
alert("paren event");
}
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
add a comment |
I faced the same problem and solve it by this method.
html :
<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>
JS:
$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});
function childEvent(){
alert("child event");
}
function parentEvent(){
alert("paren event");
}
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
add a comment |
I faced the same problem and solve it by this method.
html :
<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>
JS:
$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});
function childEvent(){
alert("child event");
}
function parentEvent(){
alert("paren event");
}
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
I faced the same problem and solve it by this method.
html :
<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>
JS:
$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});
function childEvent(){
alert("child event");
}
function parentEvent(){
alert("paren event");
}
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
answered Nov 23 '15 at 12:35
Kamuran SönecekKamuran Sönecek
1,93021743
1,93021743
add a comment |
add a comment |
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).
Syntax:
Here is the simple syntax to use this method:
event.stopPropagation()
Example:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
add a comment |
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).
Syntax:
Here is the simple syntax to use this method:
event.stopPropagation()
Example:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
add a comment |
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).
Syntax:
Here is the simple syntax to use this method:
event.stopPropagation()
Example:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).
Syntax:
Here is the simple syntax to use this method:
event.stopPropagation()
Example:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
answered Dec 20 '12 at 6:56
palaѕнpalaѕн
43.7k1367103
43.7k1367103
add a comment |
add a comment |
Click event Bubbles, now what is meant by bubbling, a good point to starts is here.
you can use event.stopPropagation(), if you don't want that event should propagate further.
Also a good link to refer on MDN
edited May 23 '17 at 11:47
Community♦
11
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
add a comment |
Click event Bubbles, now what is meant by bubbling, a good point to starts is here.
you can use event.stopPropagation(), if you don't want that event should propagate further.
Also a good link to refer on MDN
edited May 23 '17 at 11:47
Community♦
11
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
add a comment |
Click event Bubbles, now what is meant by bubbling, a good point to starts is here.
you can use event.stopPropagation(), if you don't want that event should propagate further.
Also a good link to refer on MDN
edited May 23 '17 at 11:47
Community♦
11
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
Click event Bubbles, now what is meant by bubbling, a good point to starts is here.
you can use event.stopPropagation(), if you don't want that event should propagate further.
Also a good link to refer on MDN
edited May 23 '17 at 11:47
Community♦
11
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
edited May 23 '17 at 11:47
Community♦
11
edited May 23 '17 at 11:47
Community♦
11
edited May 23 '17 at 11:47
Community♦
11
11
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
answered Dec 20 '12 at 7:00
PranavPranav
5,64941939
5,64941939
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f13966734%2fchild-element-click-event-trigger-the-parent-click-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
this is called event bubbling,A good point to start :- stackoverflow.com/questions/4616694/…
– Pranav
Dec 20 '12 at 6:55
The title of this question should be "Stop child event click from trigger parent click event" It reads as the opposite.
– Iwnnay
Oct 4 '18 at 16:14