i want to get know within onchange event handler, which control caused change (or blur) event.
i tried to use jQuery $(":focus") for that aim, but
$('.some_class').change(function (e) {
console.log(e.target);
console.log($(':focus').get(0)); // always `undefined`.
/* ......... other code......... */
});
$('.some_class').change(function (e) {
console.log(e.target);
console.log($(':focus').); // just remove the .get(0)
});
remove the .get(0),you can get the element which is on focus
In jQuery, this refers to the element with the event handler and event.target, if event is the parameter to your event handler callback will be the source of the event, if, for example, you clicked on a child element and the click bubbled up.
The focus event gets fired after the blur event, so there will be a short period of time during which no element has focus. If you really need this, you could set a short timeout to see if another input has focus a couple milliseconds after the original one gets blurred.
Related
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 :)
I wonder how do I change the order of events.
Because I have to check when I took a focusOut with a click, if the click was inside the parent div, I can not let it happen the focusOut.
The problem, which is called first event focusOut the click event.
Is it possible to reverse the order of events? (Click - focusOut)?
http://jsfiddle.net/eL19p27L/5/
$(document).ready(function(){
$(".clean").click(function(){
$(".alert").html("");
});
$(document).on({
click: function(e){
$(".alert").append("<p>click</p>");
},
focusin: function(e){
$(".alert").append("<p>focusin</p>");
},
focusout: function(e){
$(".alert").append("<p>focusout</p>");
}
})
});
It would be even better. If I could detect what the event might turn out to generate the fucusout. Hence check if it happened within the parent div, if not a focusIn, it leaves not give a focusOut.
ATT
No, the way you have your event handler set up on a common parent, you can't change the order of the events.
But, you can attach your event handlers to the specific objects you want to watch and then you can see events for that object only.
Or, you can look at the target of the event and see which object is which and you will see that the focusOut event is on a different object than the click event.
You can see the source of the event with e.target.
Example of looking at the object that is the source of the event: http://jsfiddle.net/jfriend00/u5tLhes7/
Is it possible to get the dom element that was clicked from the blur event.
myTxtBox.blur(function (e) {
var myTxtBoxClass = e.target.className
var getClassOfElementclicked == //get the class of clicked element
});
I think you should use .click(function(){}); to get clicked object. Then you can set it to blur. Right now it is unclear what initiates the blur event in the first place.
If you want to see which object that is currently "blurring" is clicked, you could assign a class to the objects when they blur and assign click event to this class.
blur can be called for more than just clicking away from a control--the user could have tabbed away. If all you're interested in is the target of a click event, then you can register a handler for clicks.
However, if you're more interested in the elements that gain & lose focus in close proximity to one another (they are two separate events, so you can't really consider a blur to have a "newly-focused target" attribute, you can use something like this:
$('input').blur(function (e) {
console.log('lost focus: ', e.target);
});
$('input').focus(function (e) {
console.log('gained focus: ', e.target);
});
http://jsfiddle.net/Palpatim/QUDED/
Also, be sure to see the discussion of blur() in the jQuery documentation: the event doesn't bubble in IE, so depending on your use case, you may wish to use the focusout event instead.
Using the new input="color" element within Chrome triggers a new popup dialog:
I would like to know if there is an event handler that fires as soon as the value in this preview window changes and not only after clicking on "OK"
jQuery('#colorinput').on('change', function() { // fires only after clicking OK
jQuery('#main').css('background-color', jQuery(this).val());
});
See http://jsfiddle.net/Riesling/PEGS4/
What you are looking for is the input event.
Your modified fiddle should now work in all (decent) browsers:
$('#colorinput').on('input', function() { ... } )
You really want input event per HTML spec.
Nothing guarantees change event to fire before the input element has lost focus.
"The input event fires whenever the user has modified the data of the control. The change event fires when the value is committed, if that makes sense for the control, or else when the control loses focus. "
To get the value of color input, you should use the event attribute onchangeprovided in w3school
<input name="eventColor" type="color" onchange="getColorVal(eventColor.value)"/>
and define a function that handle the event
function getColorVal(colorValue){
alert(colorValue);
}
I have a mousedown event attached in an anchor element which does many stuffs.
I also have a mousedown event attached to the document, and because of bubbling this event is called whenever the event attached to anchor is triggered. This is not what I want.
Can I bind a event with delay?
I dont want to use stopPropagation.
$('a').mousedown ->
...
openWindow()
$(document).mousedown ->
...
closeWindow()
Edit
I create a hack
$.fn.onBubble = (events, selector, data, handler) ->
setTimeout =>
this.on events, selector, data, handler
, 0
Work but like very ugly
As one of the comments mentions, the only way to stop events from bubbling is with stopPropagation. That said, if there are both conditions where you do want to prevent bubbling and others where you do not, you can put event.stopPropagation() into an if-statement:
$(...).mousedown(function(event) {
if(/* some condition */) { event.stopPropagation(); }
});
Alternatively you can add a conditional to the event handler attached to the document. For example:
$(document).mousedown(function(event) {
if($(event.target).is("a")) {
return; // if the element that originally trigged this event
// (i.e. the target) is an anchor, then immediately return.
}
/** code that runs if event not from an anchor **/
});
This snippet uses $.fn.is to determine if the event was triggered by an anchor. If it is generated by an anchor, the code immediately returns, which in effect ignores the event bubble.
EDIT in response to comment:
If I understand correctly, you want to close the window, if the user clicks on anything that is not in the window. In that case try this:
function whenWindowOpens { // Called when the window is opened
var windowElement; // Holds actual window element (not jQuery object)
$(document).bind("mousedown", function(event) {
if($.contains(windowElement, event.target)) {
return; // Ignore mouse downs in window element
}
if($(event.target).is(windowElement)) {
return; // Ignore mouse downs on window element
}
/** close window **/
$(this).unbind(event); // detaches event handler from document
});
}
This is basically a variation on the second solution suggested above. The first two if-statements ensure the mouse down did not occur in (using $.contains) or on (using $.fn.is again) the windowElement. When both statements are false, we close the window and unbind the current event handler. Note that $.contains only takes raw DOM elements -- not jQuery objects. To get the raw DOM element from a jQuery object use $.fn.get.