CODEWITHSUNDEEP
javascriptjqueryhtmlcss
pageajpeng
pageajpeng

Reputation: 23

How to block click event for the parent element in jQuery?

I'm developing a web page using jQuery. In this web page, there is a div tag that contains a p and a button tag.

The HTML code is like this:

<div class="container">
    <div id="attribute" style="border:solid;border-width:2px;border-color:#ccc">
        <p id="cell-content" style="display:inline">Id</p>
        <button id="remark-view" class="btn btn-primary">Detail</button>
    </div>
</div>

and the corresponding JavaScript code is like this:

$(document).ready(function(){
    $("#attribute").on('click', function(){
        console.log("click on the div attribute");
    });
    $("#attribute").on('dblclick', function(){
        console.log("double click on the div attribute");
    });
    $("#remark-view").on('click', function(){
        console.log("click on the button remark-view");
    });
});

As the code shows, a outer div has a p and button child element, and the outer div element listens on the single click and double click event while the inner button element listens on the single click event.

When I run the code in my browser and click on the button, the console shows that both click functions of the outer div and inner button element are called, which is against my purpose: only the click function of inner button should be called at this situation. Thus, is there any way to block the click event for the father element(in this case, outer div element).In other words, is there any way to stop passing the click event to the father element after the child element has handled it?

Thank you in advance!

Upvotes: 2

Views: 3853

Answers (2)

S4NDM4N
S4NDM4N

Reputation: 924

This is something I use in one of my sites to do something similar to your problem. What the below code does is it prevents the middle div from closing if the button click is on that div.

//Function for the pop up with the background dimmer
  $(document).mouseup(function(x) {
    var container = $("#divContent"),
       dimmer = $('#bgDimmer');
     if (container.is(":visible")) {
       if (!container.is(x.target) //check if the target of the click isn't the container...
         && container.has(x.target).length === 0) {
          container.hide();
          dimmer.hide();
        }
    }
});

Let try to relate to your code.

//Function for the pop up with the background dimmer
  $(document).mouseup(function(x) {
    var attribute = $('#attribute');
     if (attribute.is(":visible")) {
       if (!attribute.is(x.target) //check if the target of the click isn't the container...
         && attribute.has(x.target).length === 0) {
          console.log("click on the button remark-view");
        }
    }
});

Upvotes: 0

flyer
flyer

Reputation: 1424

stopPropagation function will stop the event from bubbling up the DOM.

$("#remark-view").on('click', function(event){
        console.log("click on the button remark-view");
        event.stopPropagation()
    });

From the jQuery documentation

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

Upvotes: 4

Related Questions