CODEWITHSUNDEEP
jqueryeventsclick
Paul Geisler
Paul Geisler

Reputation: 725

How to prevent a click() event through a child div to a parent div in jQuery?

Situation:

<div class="header">
    <div style="float: left;" class="headerTitle">+ OPEN</div>
    <div class="closeBtn" style="float: right;">- CLOSE</div>
 </div> 
<div class="touristenContent">.....</div>

Visually:

|+Open..............................|-Close|..| (header)

|............Content..........................|

Header DIV is a 'big button' with jQuery click() event for opening the content. The close DIV is inside the big header DIV and represents the close button also with click() event to close the content. This close button is only visible by clicking on the big header.

Clickng on the header and oppening the content works as expecting but clicking on the close button let the click event through to the header DIV. The content closes and opens again beacause of two click events.

So how can i design the whole thing properly to make the close button solid and to prevent click through it to the header?

Upvotes: 38

Views: 44719

Answers (3)

hungryMind
hungryMind

Reputation: 6999

Why not hook open event with <div style="float: left;" class="headerTitle">+ OPEN</div> instead of parent div. Otherwise return false or stopPropagation from inner div click handler

Upvotes: 0

Val
Val

Reputation: 17522

$('.closeBtn').click(function (event){
   event.stopPropagation();
   //   ... your code here
   return false;
});

that should do the trick, so everytime you click on close it will not affect your header div,

Upvotes: 13

Andy E
Andy E

Reputation: 344585

You need to stop the event from propagating up the DOM tree:

$('.closeBtn').click(function (evt) {
    evt.stopPropagation();

    // Your code here
});

Upvotes: 61

Related Questions