javascript - Jquery on click child element triggers on click parent element - Stack Overflow

admin管理员组

文章数量:1332865

I've similar to this:

<ul>
<li class="parent">
<div class="child"></div>
</li>
</ul>

And I've two on click triggers.

$(document).on("click", ".parent", function(){
console.dir("parent clicked");
});

$(document).on("click", ".child", function(){
console.dir("child clicked");
});

If I click child, parent is also clicked! How do i avoid this?

/

I've similar to this:

<ul>
<li class="parent">
<div class="child"></div>
</li>
</ul>

And I've two on click triggers.

$(document).on("click", ".parent", function(){
console.dir("parent clicked");
});

$(document).on("click", ".child", function(){
console.dir("child clicked");
});

If I click child, parent is also clicked! How do i avoid this?

http://jsfiddle/Vd2GA/

• javascript
• jquery

Share Improve this question Follow asked Nov 15, 2013 at 16:56 user796443user796443

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

Use either return false or e.stopPropagation() in child click event handler:

$(document).on("click", ".child", function(e) {
    console.dir("child clicked");
    return false;  // e.stopPropagation();
});

DEMO: http://jsfiddle/Vd2GA/1/

 $(document).on("click", ".parent", function(e){
     e.stopPropagation();
    console.dir("parent clicked");
    });

    $(document).on("click", ".child", function(e){
        e.stopPropagation();
    console.dir("child clicked");
    });

should do

Prevent the propagation of event from the child.

 $(document).on("click", ".parent", function () {
     console.dir("parent clicked");
 });

 $(document).on("click", ".child", function (e) {
     console.dir("child clicked");
     e.stopPropagation();
 });

Demo: Fiddle

Note: this technique is possible here only because jQuery does some behind the scene magic when event delegation is used else since both the handlers are registered to document object this cannot be done

Use event.stopPropagation

fiddle Demo

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

 $(document).on("click", ".child", function (e) {
     e.stopPropagation();
     console.dir("child clicked");
 });

Read What is event bubbling and capturing?

Updated the fiddle here: http://jsfiddle/Vd2GA/2/.

$(document).on("click", ".parent", function(){
    console.dir("parent clicked");
});

$(document).on("click", ".child", function(e){
    e.stopPropagation();
    console.dir("child clicked");
});

or you can use this condition if you need to be specific

 $(document).on("click", ".parent", function(e){
   if (e.target==this)
    console.dir("parent clicked");
 });

http://jsfiddle/Vd2GA/4/

本文标签： javascriptJquery on click child element triggers on click parent elementStack Overflow