Context:
I recently executed a block of jQuery code in which I incorrectly applied positioned on event handler before the event. The objective of the code was to produce an alert box on a change event.
Observation:
On my end, the alert box did not execute in the latest versions of FF, Chrome and IE. Other StackOverflow members (via live chat and another question) confirmed to me that the alert box executed on their end (across a variety of browsers) whereas others observed that the alert boxes did not.
Code:
Incorrectly ordered code:
//Event handler
$('#b').val($('#a').val()).change();
//Event
$('#b').on('change', function() {
alert("Change event fired on load.");
});
JSFiddle: http://jsfiddle.net/clarusdignus/rHYLM/
Correctly ordered code:
//Event
$('#b').on('change', function() {
alert("Change event fired on load.");
});
//Event handler
$('#b').val($('#a').val()).change();
JSFiddle: http://jsfiddle.net/clarusdignus/rHYLM/4/
My question:
Why do browsers inconsistently render incorrect jQuery with regards to incorrectly ordered event handlers and events?
According to w3 standard change event should propagate in bubble order.All do that except IE<9
Probably this is why there is inconsistency in firing of change event.
Related
I have a HTML5 canvas element, which the user can interact with, it has an onclick handler that just catches the event and stops it, as follows:
this.canvas.onclick = function(e){
$("#mycanvas")[0].focus();
e.stopPropagation();
e.bubbles = false;
};
I have an onclick handler on the document, as follows:
document.onclick = function(e){
//do something I only want done when the canvas is NOT clicked
}
When I click on the canvas, as expected the document.onclick handler is not fired. However, I also need to be able to trigger the click programatically, for this I am using jQuery:
$("#mycanvas").trigger($.Event(savedClickEvent));
when this code runs, the document.onclick handler is triggered. From looking at the jQuery.trigger code, it seems to be wanting not only stopPropagation(), but also preventDefault().
Why is there a discrepancy between the requirement of preventDefault() on click, and on trigger? Is this a bug in jQuery that I need to workaround, or should I not be calling stopPropagation() without preventDefault() - my understanding of these two functions is that they do fairly different things.
Bonus question: Why does $("#mycanvas")[0].click return function(){[native code]}? I suspect this is what is causing the problem.
Edit:
It seems jQuery doesn't support inline event handlers. Using addEventListener fixed the problem for click but not for mouseup - I ended up getting around this issue by not using jQuery at all, instead I used document.getElementById("mycanvas").dispatchEvent(savedEvent). I left this open in case I get a meaningful response to the bug report (https://github.com/jquery/jquery/issues/3660#issuecomment-299667529)
I’m running into this issue where a single action by the user is supposed to trigger two events but it only triggers the first one.
The scenario:
A user enters some text into a special field that modifies the layout on focusout , after entering the text, without leaving the field, they click a button.
What’s happening?
I have a focusout event on a text box and click event on a button. What I see is the focusout event gets fired but the click event never does.
I’ve encapsulated this in a jsfiddle:
http://jsfiddle.net/fCz6X/13/
$('#theText').focusout(function (){
$("#focusevent").text("Focusevent");
console.log("focus");
});
$('#theButton').click(function (){
$("#clickevent").text("Clickevent");
console.log("click");
});
So if you click in the text field then click the button I’d expect both events to fire, but we only see the focus out event.
I put in a temporary fix for this by having the mousedown event fire the button instead of a click event (this fires before the focusout event) but that is causing some other behaviors and issues that I don’t want to see. Due to those I think optimal solution is finding a way to get the focusout and click events to both fire. Does anyone have thoughts on how to fix this problem?
Edit: After seeing initial responses I dug a little deeper, the issue here is that the focusout event is changing the page layout which very slightly pushes the location of the button down. The click event triggers after the focusout is done but since the button is no longer in the exact same location, nothing happens.
Here is an updated fiddle that shows my problem
http://jsfiddle.net/fCz6X/11/
It's because you're calling alert - the focusout event fires, but before the browser recognizes you've clicked the button, the alert box blocks it.
Change your event handler to console.log or something else that's non-obtrusive and you'll be ok.
It is the Alert that is blocking.
Some browser security prevents firing too many window.alert at the time.
When trying with other triggers, it looks. You may try console.log()
$('#theText').on("focusout",function (){
$("#theText").val($("#theText").val()+"flb");
});
$('#theButton').on("click",function (){
$("#theText").val($("#theText").val()+"but");
});
I believe this is because the focusout event fires first, executing the handler, and the alert then prevents the browser from recognizing the click.
Try again with console.log instead of alert - it's less invasive.
As Joe said, the blocking alert call is what is breaking the event. Using a non-blocking call you will see both events.
If you really need to perform an alert like this, though, you can defer calling 'alert' until later using setTimeout()
$('#theText').focusout(function (){
setTimeout(function() { // alert after all events have resolved
alert("focus left text box");
}, 0);
});
Edit: In your updated fiddle the reason the click event never fires is because no click event occurs. If you move the button out from under the mouse on mousedown, there is no followup mouseup which is what initiates the 'click' event.
You may need to reconsider other aspects of your design. Your solution of using 'mousedown' is the best you can achieve because it's the only event that actually occurs.
I have some code that works fine in FF but not in IE. I have read other posts saying that the Jquery live method does not support change events but I am using a click event. Here is my code, it is inside $(document).ready(function():
$("a").live("click", function(e) {
alert("link clicked");
//do stuff
});
If FF the alert is fired but not in IE. When I use $("a").click it works fine, the problem is that I need to the function to be applied to links that do not exist when the page is first loaded (they will be created via ajax calls at a later stage).
Do I have any options here. We are using jquery-1.4.1.min.js.
Thanks in advance
if those links are within a specific content, you can use:
$('#link_container_id').delegate('a', 'click', function(e){
alert('link clicked');
});
.delegate() will watch if there are any events (click in your case) bubbling up, if so it checks for the target and compares it to 'a' in your case. Should work, but untested.
Elements should exist in the DOM at the moment you attach the live event. If later they are recreated (for example in an ajax callback) you don't need to reattach the event handler again. If elements don't exist at page load you can attach the live event when they are loaded, but if you do this then probably you no longer need the live event as you can directly attach the click event.
I have a link element where I capture the mousedown event and stop the event from bubbling so that other elements in the page don't get selected. However in firefox (3 & 3.5) when i use the DOM 2 event model It still selects other elements in the page.
I have tested it in opera and it works fine without selecting other elements. Also another weird issue is that if I use the DOM 0 event model it works fine and doesn't select other elements. Is this a bug in firefox or am I just doing it wrong?
Here are the 2 event handlers I used to test
past.addEventListener('mousedown', function (e) {
e.stopPropagation();
return false;
}, false);
past.onmousedown = function (e) {
e.stopPropagation();
return false;
};
Have you tried e.preventDefault()? stopPropagation will stop the event handlers on ancestor elements being invoked, but this is not the same thing as preventing the default action from being taken. As the DOM specs don't really specify how mouse events and selection should interact in terms of the event model, it may be one of those areas where one browser does it one way, one does it another, and neither is "right" or "wrong".
I met one troublesome web page whose structure is complicated. If one DIV is clicked by mouse, everything is OK. However, if it is focus-ed by javascript(i.e. divElement.focus). The layout turns to messy. This only happens in IE7/8.
So, is there any difference between click-to-focus and focus-by-javascript in IE?
Firing a Javascript focus event does not fire a click event. Without seeing the relevant code, I'm led to guess that some click handler is in place that is not being called in the case where you fire a focus event.
You might try, instead, firing a click:
var clickEvent;
if(document.createEvent) {
clickEvent = document.createEvent('click');
clickEvent.initMouseEvent('click');
divElement.dispatchEvent(clickEvent);
} else {
// Semi-pseudocode for IE, not tested, consult documentation if it fails
clickEvent = document.createEventObject();
divElement.fireEvent('onclick');
}
Or if you're into the jQuery thing:
$(divElement).click();
There's similar solutions for Prototype as well (search for Event.simulate).
The definition of the Focus action is to bring the input (keyboard or mouse) to a certain element, usually an input field. When an element gains focus, an OnFocus event is fired. When it loses focus, an OnBlur event is fired.
What you usually get by clicking is the OnClick event, which is not necessarily related to the above two.
This only happens in IE7/8.
Hmm, then I'm sure it's an IE related bug. Not surprising. If there is legitimate Javascript events involved, then they should fire uniformly across all browsers.