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 :)

How do I stop the fall through of element in html?

I have a button(styled from a div tag, jquery UI) and a input text box inside. I want that if I click the text box the button won't get clicked also.

Inside your event handler for the input element:
$("input").click(function (event) {
event.stopPropagation();
});
stopPropagation stops the event from propagating up the DOM tree, which prevents parent event handlers of being notified of the event.
Here's an example: http://jsfiddle.net/J76Gw/

Alternatively you can check inside the button's click handler whether event.target is the input field or not.

Use event.stopPropagation(); for textbox click event.

In the click handler for the input box you need to stop the click event propagating to the parent DOM element. So check out event.stopPropagation() - more info here.

jquery callback specificity

Is there any specificity associated with event callback with jQuery. Say, I register a mousedown event callback on a div element, and also on the document. Which one would trigger if I click on the div? Does the order of registration matters? or the specificity (like css) matters?
thanks.

It will bubble up the DOM tree and call all other events of that type.
You can stop this with event.stopPropagation().
Your example
If you assigned the events like so...
$(document).mousedown(function() { alert('document'); });
$('div').mousedown(function() { alert('div'); });
Mouse down anywhere will trigger document's handler, and get one alert dialog with document.
Mouse down on any div will trigger the div's handler, and then bubble up the DOM all the way to document where it will trigger its event handler. You will get two alert dialogs; first the div one and then the document one.

Both events will be triggered, first the div, and then the document click.

It will execute both, from inside out. Clicking in the div will fire the div event then the document. Example on jsFiddle
$(window.document).click(function(e){
alert("doc");
});
$("div").click(function(e){
alert("div");
});
You can avoid it firing other events with e.stopImmediatePropagation(). See this example
$(window.document).click(function(e){
alert("doc");
});
$("div").click(function(e){
alert("div");
e.stopImmediatePropagation(); // prevents $(doc) from rising
});

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.