JQuery: Clicking in div also triggers click() in parent
I have a <h1> in a <div>. So when I click on the <h1> I also end up triggering the click function on the <div>. I am using jquery click() function.
Can someone please help how can I avoid calling the parent click() function.
Thanks in Advance.
jquery onclick click
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
add a comment |
I have a <h1> in a <div>. So when I click on the <h1> I also end up triggering the click function on the <div>. I am using jquery click() function.
Can someone please help how can I avoid calling the parent click() function.
Thanks in Advance.
jquery onclick click
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
1
add event.stopPropagation(); inside h1 click handler or test the event.target element in the div click handler
– gaetanoM
Dec 29 '18 at 16:02
add a comment |
I have a <h1> in a <div>. So when I click on the <h1> I also end up triggering the click function on the <div>. I am using jquery click() function.
Can someone please help how can I avoid calling the parent click() function.
Thanks in Advance.
jquery onclick click
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
I have a <h1> in a <div>. So when I click on the <h1> I also end up triggering the click function on the <div>. I am using jquery click() function.
Can someone please help how can I avoid calling the parent click() function.
Thanks in Advance.
jquery onclick click
jquery onclick click
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
edited Dec 29 '18 at 16:00
Rishabh Agarwal
912320
912320
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
asked Dec 29 '18 at 15:44
TheComputerMTheComputerM
1
1
1
add event.stopPropagation(); inside h1 click handler or test the event.target element in the div click handler
– gaetanoM
Dec 29 '18 at 16:02
add a comment |
1
add event.stopPropagation(); inside h1 click handler or test the event.target element in the div click handler
– gaetanoM
Dec 29 '18 at 16:02
1
1
add event.stopPropagation(); inside h1 click handler or test the event.target element in the div click handler
– gaetanoM
Dec 29 '18 at 16:02
add event.stopPropagation(); inside h1 click handler or test the event.target element in the div click handler
– gaetanoM
Dec 29 '18 at 16:02
add a comment |
1 Answer
1
active
oldest
votes
<body>
<div id="myDiv">
<h1 id="myHeader">This is my Header</h1>
</div>
<script type="text/javascript">
$(document).ready(() => {
$('#myDiv').click(() => {
console.log('Div Clicked');
})
$('#myHeader').click((event) => {
console.log('Header Clicked');
event.stopPropagation();
})
});
</script>
</body>
Now if h1 is clicked, stop event propagation prevents the click event to be propagated to parent div element.
In the console, you should only see Header clicked.
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
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%2f53970960%2fjquery-clicking-h1-in-div-also-triggers-click-in-parent-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
<body>
<div id="myDiv">
<h1 id="myHeader">This is my Header</h1>
</div>
<script type="text/javascript">
$(document).ready(() => {
$('#myDiv').click(() => {
console.log('Div Clicked');
})
$('#myHeader').click((event) => {
console.log('Header Clicked');
event.stopPropagation();
})
});
</script>
</body>
Now if h1 is clicked, stop event propagation prevents the click event to be propagated to parent div element.
In the console, you should only see Header clicked.
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
add a comment |
<body>
<div id="myDiv">
<h1 id="myHeader">This is my Header</h1>
</div>
<script type="text/javascript">
$(document).ready(() => {
$('#myDiv').click(() => {
console.log('Div Clicked');
})
$('#myHeader').click((event) => {
console.log('Header Clicked');
event.stopPropagation();
})
});
</script>
</body>
Now if h1 is clicked, stop event propagation prevents the click event to be propagated to parent div element.
In the console, you should only see Header clicked.
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
add a comment |
<body>
<div id="myDiv">
<h1 id="myHeader">This is my Header</h1>
</div>
<script type="text/javascript">
$(document).ready(() => {
$('#myDiv').click(() => {
console.log('Div Clicked');
})
$('#myHeader').click((event) => {
console.log('Header Clicked');
event.stopPropagation();
})
});
</script>
</body>
Now if h1 is clicked, stop event propagation prevents the click event to be propagated to parent div element.
In the console, you should only see Header clicked.
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
<body>
<div id="myDiv">
<h1 id="myHeader">This is my Header</h1>
</div>
<script type="text/javascript">
$(document).ready(() => {
$('#myDiv').click(() => {
console.log('Div Clicked');
})
$('#myHeader').click((event) => {
console.log('Header Clicked');
event.stopPropagation();
})
});
</script>
</body>
Now if h1 is clicked, stop event propagation prevents the click event to be propagated to parent div element.
In the console, you should only see Header clicked.
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
edited Dec 29 '18 at 16:16
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
answered Dec 29 '18 at 16:08
Aravindh RavichandranAravindh Ravichandran
775
775
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%2f53970960%2fjquery-clicking-h1-in-div-also-triggers-click-in-parent-div%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
1
add event.stopPropagation(); inside h1 click handler or test the event.target element in the div click handler
– gaetanoM
Dec 29 '18 at 16:02