We Keep Coding

how prevent the parent click event on change a checkbox

I have a checkbox inside a parent container which has a click event, whenever I try to click the checkbox parent click works first and following by the change event, I am using e.stopPropagation(); on both the parent and child events, but still, it's not working
// make the .parent react
function grandParent(){
alert('Grand Parent: You hit me, my child or my grand child, now deal with me!');
}
// make the .parent react
$('.parent').on('click', function(e){
e.stopPropagation()
alert('Parent : Don\'t you dare hitting me or my child, again!');
});
// make the child cry, when we hit him.
$('.child').on('click', function(e){
e.stopPropagation();
alert('Child : waaaaaa waaaa waa huh huh waaa waaaa!');
});
$('.hello').on('change', function(e){
e.stopPropagation();
alert('checkbox clicked');
});
Fiddle example

You have to bind the click event on the checkbox and not the change event: http://jsfiddle.net/ohc8jt6w/

Sequence of the event matters , where the click event occurs first and Change event the next ,So in your case you need to change the type of event handling to Click click here to see the sequence / priority of events happening after clicking on check box
$('.hello').on('click change', function(e){
e.stopPropagation();
alert('checkbox '+e.type);
});

This happens because e.stopPropagation(); is on change event and .child has click event. You can do this like in #rikpg example, but if you need change event, you should just add new one click event to checkbox that only has stopPropagation
http://jsfiddle.net/wppv2152/2/

Handle blur event of parent element fired by focus on child element and by clicking outside of child

I have a "parent div" containing a child box input type=number. When user clicks outside of input box I use blur or focusout event of parent div to use input values at some other place.
I also need to use $('inputbox').trigger('focus') at some place, which fires "parent div"'s blur event unwantedly and runs code on that event.
Please give a solution to stop this parent blur event on child's focus OR give a way to find whether focus is made by trigger('focus') on child element or by user clicking outside of parent div.
I need to fire parent Blur only when user clicks outside of it & not when focus is triggered through code.

with jquery you can make custom events very easily , something like:
$('inputbox').trigger('special-focus');
then you can wait for this event just like any other event:
$('div').on('special-focus' , function(){ ... } );
this will prevent your events from interfering with the built in ones.
I guess if you don't want to use that suggestion then do this in your click handler or your focus handler of the child
.on('focus' , function(e){
e.stopPropagation();
e.preventDefault();
/// the rest of your code ...
});
this will stop the propagation of events to parent elements

This worked perfect for me:
if (e.relatedTarget === null) ...

What worked for me was checking the relatedTarget property of the eventObject object in the handler function.
$("#parentDiv").focusout(function (eventObject) {
if (eventObject.relatedTarget.id === "childInputId")
/// childInput is getting focus
else
/// childInput is not getting focus
});

.on('blur',...) of parent fires before .on('focus' ,...) of child.
Anyways for a parent div containing child input box
we can use $('input').trigger('special-focus');
and then
$("#form" ).on('special-focus', '.parentdiv' , function(event) {
$("#form" ).off('blur', '.parentdiv');
$(event.target).focus();
$("#form" ).on('blur', '.parentdiv' , showValuesOnBlur);
});
Now blur of parent will not fire on focus of child.This worked for me. i.e. off & on the blur event of parent inside special-focus.
Thanks Scott Selby :)

Prevent nested elements from triggering an event for parent element

Structure:
.parent (has if/else to toggle on click) -> .child (has nothing)
<div class="parent">Parent
<div class="child">Child</div>
</div>
The parent element is styled to hide overflowing content and toggle its height on click. When the user clicks, the parent element will expand to show the child element. I want users to be able to click on the child element without the parent element toggling back to its original size and hiding the child element. I want the toggle to only happen on the parent.
I realize the child element is still contained within the parent element's clickable area, but is there a way to exclude it?

Solution 1: Compare target with currentTarget:
$("#parentEle").click( function(e) {
if(e.target == e.currentTarget) {
alert('parent ele clicked');
} else {
//you could exclude this else block to have it do nothing within this listener
alert('child ele clicked');
}
});
Fiddle
e.target will be the element that started the event.
e.currentTarget will be where it currently is (bubbling up) which will be parentEle in this click event as that's what this is listening for.
If they are the same, you know the click was directly on the parent.
Solution 2: Stop the propagation before the event hits the parentEle:
The other option is to prevent the event from bubbling up in the first place if there is a click on a child element. That can be done like this:
$("#parentEle").click( function(e) {
alert('parent ele clicked');
});
$("#parentEle").children().click( function(e) {
//this prevent the event from bubbling to any event higher than the direct children
e.stopPropagation();
});
Fiddle
The main difference between the two is that the first solution will just ignore the event in this listener and allow it to keep bubbling up. This may be necessary if you have a parent of this parentEle that needs to get the event.
The second solution stops any click events from bubbling past parentEle's direct children. So if there was a click event on a parent of parentEle, they would never see these events either.

Use event.stopPropagation();:
$('#a').add('#b').click(fun1);
function handler(event) {
event.stopPropagation();
// now do your stuff
}

How to disable click events on a parent DOM object without disabling click events on its child DOM object?

I have some HTML like this:
<a class="button">
<span>
<span>
<span class="buttonspan">Content</span>
</span>
</span>
</a>
I already have some events on the parent Anchor object. Now I am trying to add a click event on to the child span element and at the same time to disable click events on the parent Anchor object. I am using jQuery to achieve this, but I could not figure out. My jQuery code is like this:
$('a.button').click(function(event){
return false;
});
$('.buttonspan').live('click', function(event){
event.preventDefault();
event.stopImmediatePropagation();
// some function
});
If I execute the code above, it prevents the child element click event as well. But if I do not the first part, the parent click event will be triggered as well. Is there a way to disable the parent event without disabling the newly added child click event?

You could set the click event on the parent button and use the event target to determine what was clicked and perform the necessary actions.
$('a.button').click(function(e) {
var $target = $(e.target);
if ($target.is('.buttonspan')) {
// do actions for the .buttonspan click
} else {
// do actions for a click anywhere else inside a.button
e.preventDefault();
}
});

Is it possible to have jQuery.click trigger on the top element only?

I'm trying to make a site where the user can click on any element to edit it's CSS. I use the following to add the click function to all <li>, <div> and <ul>.
$('li,div,ul').click(function () {
alert(this.id);
});
The problem is if I click on a <li> element, then I get the alert for that and any element underneath it. (all the containers).
Is it possible to have only the top element trigger when clicked?

You want to stop event propagation, you do this in jQuery by calling the stopPropagation method on the event object.
$('li,div,ul').click(function (e) {
e.stopPropagation();
alert(this.id);
});

I believe you'd want to use stopPropagation(); inside the click function.

It sounds to me like you're looking for .stopPropagation(). Calling stopPropagation will prevent the event from "bubbling" up to parent containers.