My problem is that I recently started to change my HTML5 webapp to use fullscreen + pointer lock instead of dragging the mouse in the window. The app uses keyboard in addition to mouse, and everything was working fine previously. However, now I can't get any kind of keypresses to work. Pointer locked mouse works perfectly.
Previously I listened to keypresses like this:
document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp;
where handleKeyDown and Up are functions, for example:
function handleKeyUp(event) {
doStuffWith(event.keyCode);
}
Now, I have added keyboard listeners right next to my mousemove listener:
document.addEventListener('keyup', handleKeyUp(event), false);
document.addEventListener('keydown', handleKeyDown(event), false);
where handleKey* are the same as above, but doStuffWith doesn't do anything. It seems to get some undefined events and nothing else. This is probably a fairly elementary problem, but I have a hard time solving it. Most examples and tutorials I found with Google don't use addEventListener but instead the old style like I used previously.
I am very grateful for any help.
edit // A clarification: since events are undefined, doStuffWith doesn't get called at all, because the execution stops when trying to read .keyCode of undefined
The main problem is that, according to the following MDN page, alphanumeric keys are disabled in full-screen mode:
https://developer.mozilla.org/en/DOM/Using_full-screen_mode#Things_your_users_want_to_know
There are also a couple of issues with your code. In the the line
document.addEventListener('keyup', handleKeyUp(event), false);
... you have two problems: first, the second parameter need to be a reference to a function. It's actually a reference to undefined because you're calling the function immediately and passing in the result rather than passing in a function. Second, in browsers that support addEventListener, the Event object is automatically passed into the event listener function. What you want, therefore, is:
function handleKeyUp(e) {
doStuffWith(e.keyCode);
}
document.addEventListener('keyup', handleKeyUp, false);
Related
I'm building a little web game in node.js, and I've been using event listeners for input, and it's worked fine for things like key presses and mouse movement.
window.addEventListener("keydown", onKeyDown);
window.addEventListener("keyup", onKeyUp);
window.removeEventListener("mousemove", onMouseInput);
(all of these have worked perfectly)
But when I tried using the mouseup/mousedown events (and also pointerup/pointerdown), they won't register. Is there something I'm doing wrong? Does it have to click on something?
window.addEventListener("pointerdown", changeShooting(true));
window.addEventListener("pointerup", changeShooting(false));
(doesn't work)
You have to pass a function to addEventListener, while you are passing the result of the call to changeShooting (which I assume does not return a function).
In order to do that, you can define an inline function like:
window.addEventListener("pointerdown", function() {
changeShooting(true)
});
If you need to remove the listener later, you have to define it explicitly:
function onPointerDown() {
changeShooting(true);
}
window.addEventListener("pointerdown", onPointerDown);
// later somewhere
window.removeEventListener("pointerdown", onPointerDown);
I have a search field that triggers an autocomplete search while typing. I have it trigger on keyup. This works perfectly in most browsers, but in Firefox on Android, this does not work. It seems like the keyup event is not triggered while typing. This only happens if word suggestions is turned on in the Android keyboard settings.
I see on Google search that the autocomplete search works there for the same setup, so it is obviously possible to do. I wonder how? Is it a special event I need to listen to for this to work?
Additionally I have tried to listen to the events change, keydown and keypress, but none is triggered.
HTML:
<input type="text" id="searchField"
autocomplete="off" spellcheck="false" autocorrect="off" />
jQuery event binding:
$('#searchField').keyup(function (e) {
var searchValue = $(this).val();
searchApi._executeAutocomplete(searchValue);
});
Note:
Sometimes, the key event is triggered, which is typically hitting a key that is not resulting in the process of forming a word. The most obvious here is Enter, which always triggers. Another is Space, which triggers because no word contain a space since space is the definition of a word completed. Backspace triggers if the the last character deleted was not within a word. This means it triggers if you just deleted the last remaining letter of a word (so it is the start of the field, or cursor following a space), but not if you deleted some characters at the end of a word where the cursor is still immediately following a letter. Basically, the key event is not triggered if the key press results in some kind of word suggestion from the keyboard app.
As a side note, I can say that everything works fine in Chrome on the same device.
You can use the input event instead, that worked for me in Firefox on Android.
You could bind event handlers to both input and keyup events for backwards compatibility, but in most modern browsers this will fire both:
$('#searchField').bind('input keyup', function(e){
var searchValue = $(this).val();
searchApi._executeAutocomplete(searchValue);
});
Example here:
http://jsfiddle.net/JQ928/3/
I found a solution in this answer to another question. The question was a basically "duplicate the text I write dynamically into another part of the page". The answer was including support for catching changes by non-keyboard actions, like pasting text using mouse. It was solved by starting a sniffer on focus in the text field that checks if the value has changed using setInterval(...). It clears the timer on blur.
This solved my problem which was basically that the key events didn't trigger, as well as the "paste by mouse" issue that I didn't realize was a problem until I found this answer...!
This works, but I'm not sure I am totally happy with this solution, because it uses a sniffer. I would be more happy with using some sort of event that is triggered on value change no matter what the cause of the change is. Using the change event would not work, as that is not triggered until focus leaves the field.
Trough the fact that Firefox on Android doesn't trigger key-events, but also triggers the input-event some kind of weird, (like if you press one key two events get triggerd, and it also triggers the input-event if you leave the input) I had to write my own event:
(function($){
var $event = $.event,
$special = $event.special.fennecInput = {
setup: function(){
$(this).on('input',$special.handler);
},
teardown: function(){
$(this).off('input',$spceial.handler);
},
handler: function(event) {
var context = this,
args = arguments,
dispatch = function() {
event.type='fennecInput';
$event.dispatch.apply(context,args);
};
if($(context).val() != $(context).attr('data-fennecInput-oldval')){
dispatch();
$(context).attr('data-fennecInput-oldval',$(context).val());
}
}
};
})(jQuery);
this event gets only triggered if an input-event happens that changes the value, so it doesn't execute events unnecessary.
I am wondering if mouseenter and click event can exist together and they can both exist to TRUE when checked with:
if ((evt.type === 'mouseenter') && (evt.type === 'click'))
It is because when I mouse over the link, the mouseenter triggers (set to TRUE) and even when I clicked on it, the hover is still shown. Probably they could exist together but I'm no expert on this.
If someone can give insights, I would appreciate it a lot.
Also how can I trigger the click event during the mouseenter event?
The mouseenter event fires when the mouse enters the control. The click event fires when the mouse is clicked. They are two separate events which call two separate event handlers. If you click just as the mouse enters the element they will be called within a short timespan of one another but they are still two distinct events.
It is also important that you differentiate between the mouseenter and the mouseover events. mouseenter fires when the mouse physically enters an element, whereas mouseover fires continually while the mouse remains over an element.
While you cannot trigger the click event per se, you can call the same function that is called by the click event handler. For example if you have this:
var myfunc = function (e) { ... }
document.getElementById("id").onclick = myfunc;
Then you could simply call myfunc directly and you would get the same result as if the mouse was clicked.
They can 100% exist together, and this is a great question with no good answer... When you're on a mobile device, a mouseenter event will be thrown on tap... If you are also detecting onclick as well as mouseenter, then there will be a discrepancy between mobile devices and desktop machines.
It's kind of hard to solve such a small issue at the moment.
const x = document.getElementById('some_node')
x.onclick=(e)=>{
e.stopPropagation()
// this logic will be triggered on click for both desktop and mobile
}
x.onmouseenter=(e)=>{
e.stopPropagation()
// this logic will be triggered on click for mobile only (but will
//have already been triggered on desktop when cursor entered node)
}
The only workaround I came up for this, and I think it's pretty clever, is using a eventlistener for taps/touches. The order/priority that these events are fired goes: touch > mouseenter > click.
Since the touch event is fired first, you can add a touch event listener (which will only register on a mobile device), and change a variable that prevents the mouseenter event from being triggered (which is the logic that would generally be conflicting with the onclick logic)... like this:
let isMobile = false
x.addEventListener('touchstart',(e)=>{
isMobile = true
}, false);
Then your mouseenter would need to look like this:
x.onmouseenter=(e)=>{
e.stopPropagation()
if(!isMobile){
// this logic will no longer cause a conflict between desktop and mobile
}
}
they can exist on the same object, think a button with a hover state and then a click action. The click event, though will only read the click event since the enter event actually occurred earlier.
You can create a var like mouseIsOverand set it to true when the enter event fires. I can be safely assumed, though that if a click happens the mouse is over the same target.
The two events may happen at the same time, but they will still be processed on after the other. So the if you posted will never evaluate to true.
If you look at your code again you can see that it doesn't make sense. How can something be X and Y at the same time? It can't.
for the first question i think u got an answer....
however, for Also how can I trigger the click event during the mouseenter event?
u can use trigger() function..
http://jsfiddle.net/PDhBW/2/
if u want to read more about trigger
here is the link
http://api.jquery.com/trigger/
With Jquery event delegation, You can use binding multiple events at once
$('#IdElement').on('mouseenter click', function () {
//Your Code
});
http://jqfundamentals.com/chapter/events
This is probably intended behaviour or atleast not a jQuery / js issue but I'd like some clarification if there's any to be had.
Take the following:
$(document).bind('keypress', function(e){
switch(e.keyCode)
{
case 37:
console.log('left cursor keydown, will fire on hold');
break;
case 39:
console.log('right cursor keydown, will fire on hold');
break;
case 80:
console.log('p will only fire once per press!');
break;
}
});
You can also play with the example at jQuery's docs: http://api.jquery.com/keypress/
When a left or right cursor is pressed (or many other keys such as A,E,[, etc), the event fires and you get a nice log message in the console. All fine & as intended. However, now try holding the key down - after a brief pause you will see that the keydown event fires multiple times when you hold the key, however if you try hitting a p (or, for instance, a j), it will only fire once.
I'm testing this using FF 9.0.1 and mac OSX 10.7.1 and jQuery 1.7.1.
Is this by design, is it a browser-dependant feature, or is it to do with the OS, or even the keyboard itself? Also has anyone got a list of keys that will repeat and keys that will not?
As far as the use case goes, there isn't one really - this just cropped up when I was binding an animation to a cursor press and started seeing wierd behaviour when the key was pressed. My workaround was to use the keyup() event instead, and preventDefault() on the keydown() event for the keys I was insterested in, to stop the cursors scrolling the screen.
UPDATE:
Seems that on the keypress event, keyCode is always 0 for most letters, which might have something to do with why I thought the handler only fired once. After some more testing I see the repeated log entries like for cursors. If you check the jQuery API page though, and use the demo on that, it exhibits the behaviour I was describing: http://api.jquery.com/keypress/
Still can't explain that myself :/
Behaviour varies between browsers and operating systems. The following page covers the topic of auto-repeated key events in detail in section 2.2:
http://unixpapa.com/js/key.html
This problem has been around for ages, but i think i have discovered a fix just now.
This seems to work fine
$("#search_query").keyup(function(event) {
//this will void fake keypresses
if(event.charCode == 0 && event.keyCode == 0) {
return false;
}
//place the rest of you code here
});
Also - for the benefit of all people who view this post: try the "keydown" method
Keypress will get fired multiple times... keydown won't
http://jquerymobile.com/demos/1.0a2/experiments/api-viewer/docs/keypress/index.html
EDIT
Based on the number of views and the complete lack of responses I have to assume that I did a poor job of communicating my issue. I'm going to try to rectify that now.
I extended the HTMLElement prototype with a new tap method like so:
HTMLElement.prototype.tap = function (func) {
this.addEventListener("touchend", func, false);
};
I also created a custom tap event in jQuery:
$(document).delegate("*", "touchend", function (e) {
$(this).trigger("tap");
});
I also created a jQuery plugin called tap:
$.fn.tap = function (func) {
this.bind("tap", func);
};
If I try to use any of these with a callback function that includes an alert statement the callback executes twice. I tap the element to pop up the alert. I tap the "OK" button in the alert to close it. The next time I tap the screen no matter how long I wait the alert pops up again. This time tapping the "OK" button doesn't seem to set up another repeat.
However if the callback function doesn't include an alert statement (e.g. I use a console.log statement instead) the callback only executes the one time.
Does anyone know a way to deal with this? I'm about to try unhooking the event handler from within itself and then rebinding it afterwards, but that's nothing more than a hack if it's even successful.
I'd rather do things the "right" way. :-)
ORIGINAL
I just finished writing a "tap" function that I can use by extending the HTMLElement or Element prototypes as well as a custom "tap" event and "tap" plugin both for jQuery. I thought I had this in the bag until I decided to use a simple alert statement as test code.
When I use these with some element on my test page, they fire properly when I first "tap" the element, but the problem arises after I touch the alert's "OK" button and then, any amount of time later, tap the screen again at which point the event handler fires a second time.
At first I thought it was my custom code, but when I tried it with the following very basic JavaScript I was able to replicate the exact same issue.
document.getElementById("some-element").ontouchend = function (e) {
alert("Howdy doody!");
};
I imagine it must have something to do with the fact that I have to touch the screen again to execute the "OK" on the alert while still technically "inside" the event handler (since the alert is in effect "blocking" the completion of the handler function).
The fact that the behavior isn't replicated with the following slightly different code seems to support my imagination. :-)
document.getElementById("some-element").ontouchend = function (e) {
console.log("Howdy doody!");
};
If I include the above code in a page and touch that element after the callback fires I won't get a repeated firing of that callback function as opposed to the previous block of code where I'll see the alert pop up a second time the next time I tap the screen after hitting "OK" no matter where on the page I tap.
A strange issue indeed, and I haven't been able to find any information about why this might be happening. Does anyone have an idea what is happening?
I believe the visual, full-page alert being triggered on touch end is interfering with the touch event cycle. Try to call the alert after yielding to the DOM. eg.
setTimeout(function() {
alert('btn clicked');
}, 0);