On my site I have registered a keypress event handler for the whole document.
$(document).keypress(myhandler);
And I handle the 'space' key to scroll a list.
Trouble is, there is an <input type='text' /> element, and I don't want 'space' keypress to scroll the list when it is entered in the input.
I couldn't find any information in the "event" object passed by JQuery to the handler, to identify where the source of the event is.
Alternatively, you could attach another event handler to the input field, and in this handler stop the propagation of the event:
jQuery('#input-field-id').bind('keypress', function(e) {
e.stopPropagation();
});
This way, you can leave the global event handler as it is. Might be cleaner.
you're looking for event.target.id, which will be the id of the element that the event was raised on. So inside myhandler you would need something like the following
function myhandler(e) {
if (e.target.id !== 'id of input') {
/* rest of event handler */
}
}
See the QuirksMode docs about event order, and especially about how to turn off the events, which is browser-specific. Quote:
For a complete cross-browser experience do
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
Related
I have the below JQuery eventhandler. I want to stop all navigations on a web page.
$(document).click(function(event) {
event.stopPropagation();
event.preventDefault();
event.cancelBubble = true;
event.stopImmediatePropagation();
$(document).css('border-color','');
$(document).css('background-color','');
$(event.target).css('border-color','yellow');
$(event.target).css('background-color','#6BFF70');
return false;
});
When I use this on Facebook Login page, it stops all navigations. But in Google home page, "I'm Feeling Lucky" button still navigates to next page. How do I avoid it?
I'm using JavaFX browser by the way. It is similar to Safari browser.
If I load the Google search page, and execute this at the console:
document.body.addEventListener(
"click",
function (ev) { ev.stopPropagation(); ev.preventDefault(); },
true);
then I cannot click the "I'm Feeling Lucky" button anymore. The key is to use the third parameter and set it to true. Here is what MDN [says] about it:
useCapture Optional
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
(Emphasis added.)
What you tried to do does not work because your event handler is on document, and thus will be called after any event handlers on the children of the document. So your handler cannot prevent anything.
With useCapture set to true, you can operate on the event before it gets a chance to be passed to the child element. I do not know of a way to have jQuery's event handlers work in the way you get with useCapture. Barmar's answer here says you can't use jQuery to set such handler. I'm inclined to believe him.
99.99% of webpages won't be able to have their navigation stopped by stopping event propagation for the reason I commented (you can't stop the event before it triggers all handlers for the initial target of the event). If preventing navigation is all you are interested in, I recommend using the window.onbeforeunload event, which is made for this exact situation.
Here is an example: http://jsfiddle.net/ejreseuu/
HTML:
google
JS:
window.onbeforeunload = function() {
return "Are you sure?"
}
There is no way to not have a confirmation box that I know of, as code that locks the user out of navigating away no matter what they do is generally malicious.
preventDefault() should not work in this case, cause Google relied on custom event listeners to handle click events on this button. While preventDefault()
prevents browser's default behavior.
For example, if this button was of type="submit", preventing default on click event would prevent browser's default behavior, which is submitting a form. But in this case click is handled by eventListeners added to the button itself. preventDefault() won't affect catching an event by them. Nor stopPropagation(), because it stops propagation of event to higher levels of DOM, while other eventListeners on the same level (button in our case) still get the event. stopImmediatePropagation() could work in theory, but only if your eventListener was added before google's.
So the easiest way to stop propagation is to stop an event before it reaches button node, and that's on capture phase, because button is the lowest element in the hierarchy. This can be done by passing true argument while adding eventListener
document.body.addEventListener("click", function (event) {
event.stopPropagation();
}, true);
This way event will be stopped before bubble phase, and so before it reaches eventListeners added to the button. More on capture and bubble phases here
Note that preventDefault() is not needed in this case. Actually, this button's event listeners are to prevent default themselves. Here are those eventListeners, for click and keyup respectively:
d = function(a) {
c.Xa.search(c.yc(), b);
return s_1vb(a)
}
function(a) {
13 != a.keyCode && 32 != a.keyCode || d(a)
}
note call to s_1vb, here is its sourse:
s_1vb.toString();
/*"function (a){
a&&(a.preventDefault&&a.preventDefault(),a.returnValue=!1);
return!1
}"*/
Basically its a function that take an event and do everything possible to prevent browser's default behavior
By the way, default behavior can be canceled on any stage of event flow (se Events Specification), including the very last stage, when it reached document. Only after it passed "through" all eventListeners uncanceled, browser should execute its default behavior. So attaching your listener to document was not the reason preventDefault() didn't work, it was because it was the wrong guy for the job :)
Try this:
$('body').click(function(event) {
event.stopPropagation();
event.preventDefault();
event.cancelBubble = true;
event.stopImmediatePropagation();
$(document).css('border-color','');
$(document).css('background-color','');
$(event.target).css('border-color','yellow');
$(event.target).css('background-color','#6BFF70');
return false;
});
Try to bind not only to click event, but as well on mousedown event.
Try this css:
body * {
pointer-events: none;
}
or in jQuery:
$("body *").css("pointer-events", "none");
Try declaring a new window event and then stopping the propagation from there:
var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation)
{
e.stopPropagation();
}
Note that Google uses jsaction="..." instead of onclick="...". Try to use it's unbind method on the specified button.
Also you can use dynamic attachment, like:
$(document).on('click', '*', function
Or throw new Error()(just as a dirty hack)
Can someone explain the difference between the "click" event and the "contentClick" event ?
stage.on("contentClick", function(e) {
console.log("stage contentClick");
})
stage.on("click", function(e) {
console.log("stage click");
})
//Both events get fired equally
I've already noticed that "contentClick" seems to work on the stage only :
rect.on("contentClick", function(e) {
//This never gets fired
console.log("rect contentClick");
})
... and "contentClick" doesn't play well with cancelBubble :
rect.on("click", function(e) {
console.log("rect click");
e.cancelBubble = true;
})
stage.on("contentClick", function(e) {
//This fires even though cancelBubble should prevent it
console.log("stage contentClick");
})
Apart from these differences, what exactly IS "contentClick" and what is it usually used for ?
Thanks !
Any contentEvent will fired on events on DOM element. First argument of callback is special Kinetic event object, you can access to native DOM event object via evt property (for v.5.1.0):
stage.on("contentClick", function(e) {
var nativeEvent = e.evt;
console.log("stage contentClick", e);
});
Other events (with no 'content' prefix) are fired on Kinetic Node events.
Look at demo: http://jsbin.com/pomemo/1/edit
Try to click on image. You will see two events in console contentClick (bubbled from canvas element) and click ("bubled" from Kinetic.Image).
Then try to click on empty space. You will see only one event contentClick and no click event (because you didn't click on any Kinetic.Node)
I noticed that when the event is triggered on a specific node, the targetNode value in the event is set to that node.... when the event is triggered only by clicking on the stage, then targetNode is NOT set on the event.
So, I set my handler to test for existence of targetNode:
UIUtils_stageClick = function(event){
// unselect anything, only if we did not click on a card.... clicking on the table background only
if (!event.targetNode) {
voidFunctions_clearSelection();
}
// hide any error message flag or card label tag
UIUtils_hideErrorToolTip();
UIUtils_hideCardToolTip();
window.game.stage.draw();
}
Using Javascript (ExtJS), how can I add an event listener for tab out of a button. I know, blur() is one way but this will also fire when the element loose focus because of other events like mouseout etc.
I want to be able to distinguish a Tabout from these other event. Is it possible?
//event parameter gives me no information whether its tab key or mouse
//btn is Ext.button.Button...
btn.on('blur', function (obj, event) {
}
You can use the keydown event:
$("button").on("keydown", function(e) {
if(e.which === 9) {
console.log("Tab pressed");
}
});
Example jsFiddle
I am working with an existing web app, in the app there are a variety of submit buttons on different forms, some using regular http post, some defining an onClick function, and some binding a js event handler to the button using a class on the element.
What I want to do, is bind another event handler to these buttons by just adding a class to the buttons, but what I want to determine is will the new event handler be guaranteed to be executed, or could one of the form submit actions happen before it does meaning my new function isn't hit.
The example scenario is I want to add a class to these buttons that bimds them all to a common js function that simply logs usage to some api. Is there a risk that the logging function isn't called because the form submit has navigated away from the page?
I've not done loads of js development, and I could test this 100 times over and just get lucky with it firing.
Below is some code I have tested with for one of the examples - again, I'm not asking how to bind multiple events, the question is to about my understanding of the spec and whether execution of all handlers is guaranteed.
$(document).ready(function(){
$('.testingBtn').click(function() {
window.location.replace("http://stackoverflow.com");
});
$( ".testingBtn" ).click(function(){
alert('submitting!');
});
});
<input class="testingBtn" type="submit" id="submitform" value="Complete Signup" />
As seen above, I can bind the multiple events, and in this example, just directed to another url, but this could be a form.submit() etc. In my testing the alert has always fired first, but am I just getting lucky with the race conditions?
In JS, you don't really have control over what order the event handlers are called, but with careful delegation and well-placed listeners, it is possible.
Delegation is one of the most powerful features of the event model. As you may or may not know: in JS, an event is handed to the top of the dom, from where it propagates down to the element onto which the event should be applied. It stands to reason, therefore, that an event listener attached to the global object will call its handler prior to a listener that has been attached to the element itself.
window.addEventListener('click',function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
console.log('window noticed you clicked something');
console.log(target);//<-- this is the element that was clicked
}, false);//<-- we'll get to the false in a minute
It's important to note we actually have access to the event object in the handlers. In this case, we left the event object untouched, so it'll just continue to propagate down to the target, on its way down, it might meet with something like this:
document.getElementById('container').addEventListener('click', function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() !== 'a' || target.className.match(/\bclickable\b/))
{
return e;//<return the event, unharmed
}
e.returnValue = false;
if (e.preventDefault)
{
e.preventDefault();
}
}, false);
Now, this handler will be called after the listener at the window level calls its helper. This time, the event is changed if the clicked element didn't have the clickable class, or the element is a link. The event is canceled, but it lives on, still. The event is still free to propagate further down the dom, so we might encounter something like:
document.getElmentById('form3').addEventListener('click',function(e)
{
e = e || window.event;
if (e.returnValue === false || e.isDefaultPrevented)
{//this event has been changed already
//do stuff, like validation or something, then you could:
e.cancelBubble = true;
if (e.stopPropagation)
{
e.stopPropagation();
}
}
}, false);
Here, by calling stopPropagation, the event is killed off. It can't propagate further down the dom to its target unless the event was already altered. If not, the event object travels further down the DOM, as if nothing happened.
Once it reaches its target node, the event enters its second phase: the bubble phase. Instead of propagating down into the deeps of the DOM, it climbs back up, to the top level (all the way to the global object, where it was dispatched... from whence it came and all that).
In the bubble phase, all the same rules apply as in the propagation phase, only the other way around. The event object will encounter the elements that are closest to the target element first, and the global object last.
There's a lot of handy, and clear diagrams for this here. I can't put it any better than good 'ol quirksmode, so I suggest you read what they have to say there.
Bottom line: when dealing with 2 event listeners, attach them both on a different level to sort-of queue them the way you like.
If you want to guarantee both are called, only stop the event from propagating in that handler that will be called last.
When you've got two listeners, attached to the same element/object for the same event, I've never come across a situation where the listener that was attached first, wasn't also called first.
That's it, I'm off to bed, hoping I made sense
jQuery makes this easy.
$(document).on('click', '.someclass', function() {
doStuff();
});
$(document).on('click', '.someclass', function() {
doMoreStuff();
});
Handlers then both will fire on click. jQuery keeps a queue of handers for you. And handles document clicks that match a selector of your choice so that they can be triggered no matter when your buttons are created.
I am/was having a similar issue as this. However I can not affect the order of/delegate the pre-existing 'click' events (added by Wicket framework).
But I still need to execute a new custom event before any of the 'click' or 'change' events handled by the framework.
Luckily there are several events that are actually executed in order. The 'mousedown' and the 'mouseup' happens to happen before the 'click'.
http://en.wikipedia.org/wiki/DOM_events
$(document).on('mousedown', function (event) {
event = event || window.event
var target = event.target || event.srcElement;
console.log(target + ' before default event'); // Hold mouse button down to see this message in console before any action is executed
});
OR
$(document).on('mouseup', function (event) {
event = event || window.event
var target = event.target || event.srcElement;
alert(target + ' before default event'); // You may not notice this event fires when the page changes unless this is an alert
});
This will allow the logging to be done (e.g. via ajax) before the actual event is executed e.g. a page change via (ajax) link.
Of course you may need to have more sophisticated means to detect for what the additional event handling should be done, but you can use for example the 'target' information for this. => This script monitors everything on the page, as this is how I need this to be done.
I am trying to figure out why the following doesn't work.
I am setting a keydown event handler, and then triggering the event. But the handler doesn't detect it.
If anyone can enlighten me!
function onKeyDown(event)
{
alert('keydown');
}
document.addEventListener('keydown', onKeyDown, false);
var keydown = jQuery.Event('keydown', {which:38, keyCode:38});
$(document).keydown();
$(document).trigger(keydown);
jsfiddle: http://jsfiddle.net/4bf3z/
From http://api.jquery.com/trigger/, emphasis added:
Any event handlers attached with .on() or one of its shortcut methods
are triggered when the corresponding event occurs. They can be fired
manually, however, with the .trigger() method. A call to .trigger()
executes the handlers in the same order they would be if the event
were triggered naturally by the user.
So, it works as expected if you attach the handler with jQuery instead of pure javascript:
function onKeyDown(event)
{
alert('keydown');
}
$(document).on('keydown', onKeyDown); // <----
var keydown = jQuery.Event('keydown', {which:38, keyCode:38});
$(document).keydown();
$(document).trigger(keydown);
jQuery’s trigger only triggers jQuery-attached events. Triggering actual DOM events is trickier, and the keyboard events module is still a working draft:
var e = document.createEvent('KeyboardEvents');
e.initKeyboardEvent('keydown');
document.dispatchEvent(e);
The arguments to initKeyboardEvent are on MSDN. Firefox uses initKeyEvent.
Updated jsFiddle