We Keep Coding

Preventing a JQuery click listener

I have a .click() on a div.
I added a button in the div and now every time I click the button, the JQuery does the function associated with the div and preforms the action on the button.
I understand why it is doing this. I was wondering if I could make the click listener ignore the children?
Is there already a function/syntax for that or do i need to make one from scratch? The div and the button are called by #id.

To make the event listener ignore children, you can check that the bound element is the same as the target
$('div').on('click', function(e) {
if ( e.target === this ) {
// DIV was clicked, not children
}
});
Or go the other way, preventing the event from bubbling up
$('div button').on('click', function(e) {
e.stopPropagation();
});

stopPropagation() of a different event

How can I listen to a change event on a checkbox without triggering a click event on its container?
<label><input type="checkbox"> Hello world</label>
I want to trigger an action on the checkbox's change event, but I don't want it to bubble up to a click event on the label.
(function ($) {
$('input').change(function (v) {
v.stopPropagation();
});
$('label').click(function () {
alert('You should not see this message if you click the checkbox itself!');
});
})(jQuery);
http://jsfiddle.net/r49PA/
Any ideas? Thanks!

The issue is that two events are triggered when you click the checkbox -- a change and a click. You're only catching the change, so the click isn't ever being told to stop propagation. You need to either add a second handler on the checkbox for click events, or combine one handler to catch both types, like this:
$('input').on('change, click', function (v) {
v.stopPropagation();
});
Here's a jsFiddle demonstrating a combined handler: http://jsfiddle.net/r49PA/4/

You can stop propagation on click event instead of change event since you bind click event for the parent label:
$('input').click(function (v) {
v.stopPropagation();
});
Updated Fiddle

With plain javascript you can do something like this:
var stopPropagation = false;
selector.addEventListener('mousedown', function(event) {
// simulating hold event
setTimeout(function() {
stopPropagation = true;
// do whatever you want on the `hold` event
})
}
selector.addEventListener('click', function(event) {
if (stopPropagation) { event.stopPropagation(); return false; }
// regular event code continues here...
}
Since mousedown and click events are overlapping, we want the click event to not be triggered when we are trying to get the hold state. This little helper flag variable stopPropagation does the trick.

Trigger click on child but prevent event propagation to parent

How do I trigger click on a child element without letting the click event bubble upto the parent & thereby create a infinite trigger loop of click event.
For example I have like this:
<li>
<a> ... </a>
</li>
I want to trigger a click event on a whenever li is clicked, but to prevent infinite trigger loop, I should avoid event propagation upto parent. How do I do that ?

Something like this?
$('li').on('click','a', function(e) {
e.stopPropagation();
// your code here...
});

By using .stopPropagation() on the anchor you can stop the bubbling. You should be able to use something like:
$('a').click(function (e) {
e.stopPropagation();
console.log('link');
});
$('li').click(function () {
$('a').click();
});
jsFiddle example

You do not state exactly the behavior you want from the click on the link, but if you simply want to stop the click being handled at all, use preventDefault() on the event argument of click:
$('li').on('click','a', function(e) {
e.preventDefault();
});
If you just want to stop the parent seeing the event use stopPropagation() instead:
$('li').on('click','a', function(e) {
e.stopPropagation();
});
The other option is return false, which does the same as both preventDefault() and stopPropagation()
$('li').on('click','a', function(e) {
return false;
});

use event.stopPropagation()() in the event callback.
$('selector').click(function(event){
event.stopPropagation()();
})

Parse the tag name on the parent click handler. (You could also look at class name or ID, among other event filters.) If desirable child tag is detected, then stop the propagation and return true so that this event runs. If desirable child tag is not detected, then prevent default event and return false. Thus, clicking on LI will trigger the click on A without a runaway event loop, and clicking on A will proceed properly without a runaway event loop either. Note also that you can't just fire the .click() event on the tag. You need to send it deeper into the native DOM element, using [0].click(), as I have shown below.
$('LI').click(function(e){
var sTag = e.target.tagName.toUpperCase();
if (sTag == 'A') {
console.log('DEBUG: A click');
e.stopImmediatePropagation();
return true;
} else {
console.log('DEBUG: ' + sTag + ' click');
e.preventDefault();
// the following won't work without the [0]
$(this).find('A')[0].click();
return false;
});

How to have jQuery fired exact binded event only

I have a scenario where I have to bind click event to both outer and inner div, but there comes a problem where I click on the inner div it will fired 2 click event including outer and inner div binded event.
How do I get exact event fired for the inner div only?
Here I attached the jsfiddle demo:
http://jsfiddle.net/mochatony/FkCmH/8/

Just add return false; to the small box handler.
Fixed jsFiddle: http://jsfiddle.net/brodenbaugh/BMPYd/
$('#small-box').click(function(){
console.log('red box');
return false;
});

You can prevent events from bubbling to the parent using the .stopPropagation method, which does as its name suggests. Updated link: http://jsfiddle.net/EQpA2/
$('#big-box').click(function(){
console.log('blue box');
});
$('#small-box').click(function(e){
e.stopPropagation();
console.log('red box');
});
​

can someone explain how this stopPropagation works?

I was trying to setup this "when you click outside of the element, close it" type of thing using some code I found on Stackoverflow:
$(document).click(function() {
$('.list-to-hide').hide();
});
$('.show-list-button').click(function(event) {
event.stopPropagation();
});
Could someone explain the later part with stopPropagation? I don't understand why it's needed.
Thanks!
Matt

Imagine this:
<div>
DIV
<span>
Span
</span>
<div>
and:
$('div').click(function() { alert('div clicked'); });
$('span').click(function() { alert('span clicked'); });
Check out what happens when you click each one
When you click the span, it happens to also trigger the div because your also clicking the div.
Now if we wanted to alert the span only we need to stop the div click from triggering when we click on the span so we do this:
$('div').click(function() { alert('div clicked'); });
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); });
See what happens now

Your example code is missing a vital part:
$(document).click(function() {
$('.list-to-hide').hide();
});
$('.show-list-button').click(function(event) {
event.stopPropagation();
$('.list-to-hide').show();
});
Without the event.stopPropagation(), it would show the list, and then hide it because the .show-list-button is inside the $(document) so both click handlers would fire. event.stopPropagation() basically says only apply this click event to THIS CHILD NODE and don't tell the parent containers anything because I don't want them to react.
Think about it this way - you rent a taxi for $100. The driver gives his company $80. event.stopPropagation() is like telling him to keep all $100 because the company doesn't need to know anything about the ride.

event.stopPropagation(); prevents the event from bubbling up the DOM. Without this line, clicking on .show-list-button the click handler for document will fire also. With it, the document click will not fire.

Have you read this ?
http://api.jquery.com/event.stopPropagation/
It prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Example
Kill the bubbling on the click event.
$("p").click(function(event){
event.stopPropagation();
// do something
});