I'm porting some old Javascript to jQuery:
document.onkeyup = function (event) {
if (!event) window.event;
...
}
this code works on all major browsers. My jQuery code looks like:
$(document).keyup = function (event) {
...
}
however this code is not working (the function is never triggered at least in IE7/8). Why? How to fix?
The jQuery API is different:
$(document).keyup(function (event) {
...
});
jQuery.keyup is a function which takes as an argument the callback. The reason behind it is to let us assign multiple keyup (or whatever) events.
$(document).keyup(function (event) {
alert('foo');
});
$(document).keyup(function (event) {
alert('bar');
});
There's also keyup() without an argument, which will trigger the keyup event associated with the respective element.
Related
I need to pass somehow the information about pressed Ctrl key on invoking the event by jQuery click function. I want invoke this with Ctrl key pressed.
$(selector).click();
This is simplified example:
https://jsfiddle.net/62mdur6o/
When you click on the first cell of table ("One") you do not get information about present Ctrl key in the event.
Is it possible to invoke click listener differently or to attach somehow this information to the event which will be passed to other listeners?
You can trigger event using:
$('#cell').click(function (event) {
event.stopPropagation();
var e = jQuery.Event( event, {ctrlKey: event.ctrlKey} );
$(this).next().trigger(e);
});
-demo-
Target each cells
$('.cells').click(function (event) {
if (event.ctrlKey) {
alert('ctrl pressed');
} else {
alert('just clicked');
}
});
updated fiddle
When a user clicks on a telephone number it should do nothing on desktop and on mobile it should call the number. I thought the solution would be as simple as returning false or preventDefault when on a desktop but so far it doesnt seem to work:
555-555
I'm using mouseup() so that it only prevents it on desktop. The function runs but the browser still tries to open up another app.
$('a[href^="tel"]').mouseup(function (e) {
e.preventDefault();
return false;
})
Is there a solution as simple as this that actually works or is the best method to detect for mobile and change the href attributes as seen on other questions?
SOLUTION
Thanks to the answer below. mouseup() runs but can't preventDefault. This was the final code using modernizr:
$('a[href^="tel"]').on('click',function (e) {
if ($("html").hasClass("no-touch")) {
e.preventDefault();
}
});
You could do this:
$('.no-touch a[href^="tel"]').on('click',function (e) {
e.preventDefault();
});
If you need it to work on touch devices, and are using Modernizr (which it looks like) you could do this instead:
$('a[href^="tel"]').on('click',function (e) {
if (!Modernizr.touch) {
e.preventDefault();
}
... my touch code ...
});
Try like
function callMethod(){
//do stuff here
}
$('a[href^="tel"]').on('click',function (e) {
e.preventDefault();
callMethod();
})
$('a[href^="tel"]').on('touchstart',function (e) {
callMethod();
})
When I want a function to stop a link and continue on executing my own code, I do this:
// IE
if (e.cancelBubble) {
e.cancelBubble = true;
}
// Firefox
if (e.stopPropagation) {
e.stopPropagation();
}
// Others
if (e.defaultPrevented) {
e.defaultPrevented();
}
alert('still executing my function');
Is all that really necessary, or could I do it with less code?
Simply make the function return false for javascript.
Since you mentioned in your comment you are using a jQuery click method, add the event.preventDefault().
$('#mylink').click(function(event) {
event.preventDefault();
//code here
})
jquery Source (thanks to BenjaminGreunbaum) for pointing out that jQuery normalizes events, thus event.returnValue is already handled.
For javascript, you'll want to add an eventListener.
function derp(event) {
event.preventDefault();
}
document.getElementById("mylink").addEventListener('click', derp, false);
You can use return false as it is effectively the same as calling both e.preventDefault and e.stopPropagation
e.preventDefault() will prevent the default event from occurring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.
Write a simple return false; statement.
This will work in all browsers.
I have an HTML image map which has a few areas with links. I also have some Javascript functionality which, in certain cases, overrides the default functionality of the image map for some specific areas.
I have attached my function to the areas I want through this function (where el is the element, eventName is the name of the event and the eventHandler is the actual function):
function bindEvent(el, eventName, eventHandler)
{
if (el.addEventListener)
{
el.addEventListener(eventName, eventHandler, false);
}
else if (el.attachEvent)
{
el.attachEvent('on'+eventName, eventHandler);
}
}
So through my custom handler I am doing something like this:
function onAreaClick(e)
{
//my custom code here
e.cancelBubble = true;
if(e.stopPropagation)
e.stopPropagation();
return false;
}
//...
//assume looping through all areas of the imagemap here, with each element referred to by the variable area
bindEvent(area, 'click', onAreaClick);
The onAreaClick function in fact triggers OK, however I can't get the event to stop propagating. I tried cancelBubble, stopPropagation, and return false, but the link is still followed through. I also tried to change the phase from bubbling to capturing in the addEventListener() function call in bindEvent().
How can I stop this event from triggering the default action of the image map?
OK, so after some more experimentation I seem to got it working on all browsers without JS errors (or so it seems).
I created a function that stops the default handler, and I called it with the event as argument. This function looks like this:
function stopDefaultHandler(e)
{
if (e)
{
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation)
e.stopPropagation;
if (e.preventDefault)
e.preventDefault();
}
if (window.event && window.event.returnValue)
window.eventReturnValue = false;
}
It seems to work OK, but comments appreciated.
Did you try
e.preventDefault()
I would like to create a custom event in jQuery that captures ENTER onkeypress events, so that I would not have to code this way every time:
if(e.keyCode == 13) {
// event code here
}
In other words, I would like to be able to code like this:
$("selector").bind("enter", function(){
// event code here
});
Modern jQuery (1.7 and up) uses .on() to bind event handlers:
// delegate binding - replaces .live() and .delegate()
$(document.body).on("keyup", ":input", function(e) {
if(e.which == 13)
$(this).trigger("enter");
});
// direct binding - analogous to .keyup()
$(":input").on("keyup", function(e) {
if(e.which == 13)
$(this).trigger("enter");
});
Older versions of jQuery use one of the following methods. You could have a single .live() or .delegate() event handler for all elements. Then use that to trigger your custom event, like this:
$(document.body).delegate(":input", "keyup", function(e) {
if(e.which == 13)
$(this).trigger("enter");
});
Not for any :input element you could do exactly what you have:
$("selector").bind("enter", function(){
//enter was pressed!
});
You can test it out here.
$("selector").keyup(function (e) {
if (e.keyCode == 13) {
$(this).trigger("enter");
}
}).bind("enter", function () {
// event code here
});
It is a good idea to use namespaced event names, to reduce the chance of accidentally clashing with other jQuery code that uses custom events. So instead of "enter" you could use "enter.mywebapp" or something similar. The makes the more sense the more custom events you use.