Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 367
Paul Geisler Avatar asked Oct 20 '11 12:10

Paul Geisler


People also ask

How do I prevent a parent's onclick event from firing when a child is clicked?

click(function(e) { e. stopPropagation(); }); As said by jQuery Docs: stopPropagation method prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.


2 Answers

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

$('.closeBtn').click(function (evt) {     evt.stopPropagation();      // Your code here }); 
like image 182
Andy E Avatar answered Sep 21 '22 07:09

Andy E


$('.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,

like image 35
Val Avatar answered Sep 22 '22 07:09

Val