I'm building an website, and I need to get mousewheel event. In order to do that I've tried following methods:
//For Chrome
window.addEventListener('mousewheel', func);
// For Firefox
window.addEventListener('DOMMouseScroll', func);
This one works only on chrome. ↑
mapDiv.onmousewheel = function(e){
func(e);
}
This one too isn't working on firefox.
I've also tried solution suggested on this webpage, but that also resulted in code only working on chrome.
So how to solve this issue, and also make solution compatible on as much as possible modern browsers?
If you read the documentation, you'll see mousewheel is non-standard and suggest to use wheelevent.
See here: https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
That refers to https://developer.mozilla.org/en-US/docs/Web/Events/wheel
Sometimes, the documentation solve the problem automagically.
You should use like this:
// standard for all browsers
window.addEventListener('wheel', func);
And here you are an implementation example for compatibility with legacy and modern browsers:
https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser
Related
This is the online demo suggested by MDN:
https://mdn.github.io/dom-examples/pointer-lock/
It works on desktop, but not on mobile (Chrome, Edge, FF).
Meanwhile, the pointer lock API is listed as widely supported on mobile:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
more demos:
Quake 3 WebGL demo
http://media.tojicode.com/q3bsp/
http://www.smartjava.org/examples/pointerlock/
I implemented it myself too, and when I used JSON.stringify(e) to read the contents of the error event, I got: '{isTrusted:true}'
UPDATE:
I used a more complex function to serialize the whole event object, so after adding the suggested by MDN event listeners:
document.addEventListener('pointerlockerror', lockError, false);
document.addEventListener('mozpointerlockerror', lockError, false);
and
function lockError(e) {
serializeEvent(e)
}
I got from the serialize function:
UPDATE #2:
I included FF as it doesn't work either, it just doesn't raise an error, while it follows pointer erratically (at high speed), without locking it and while firing the pointerlockchange event!
I need help figuring out why Internet Explorer won't fire my 'paste' event.
I'm using IE 11. Here is my code:
$(document).on('paste', '.pasteTarget', handlePaste);
When trying this in IE, the function never gets called. It works in chrome.
Different browsers treat onpaste differently, or not at all. For IE 11, the latter seems to be the case.
From MDN:
Non-Standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Source
Edit: As pointed out in the comments, IE 11 does indeed support onpaste to some extent. However, as this is a non-standard feature, you should be careful about using it in production.
You could use beforepaste event instead and access clipboardData from window, not from the event.
But, indeed as pointed out already, Clipboard API doesn't seem to be supported in IE: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/clipboardapi/
I am trying to write an event handler that detects whether a video player I have is in fullscreen or 'regular' mode.
I have tried using
document.addEventListener("fullscreenchange", myfunc, false);
but this doesn't work in IE, I have implemnted the same thing for firefox and chrome using webkitfullscreenchange and mozfullscreenchange event. Is there any other event I can use in IE for this? Or another way of doing this?
Any help would be appreciated. Thanks!
You have jQuery, so use it:
var screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
$(document).on(screen_change_events, function () {
});
(addEventListener isn't supported in versions earlier than IE 9 anyways)
At the same time, it doesn't look like full screen is supported in any version of IE:
http://caniuse.com/fullscreen
MDN Reference:
https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
Here's a possible hack around it:
onfullscreenchange DOM event
There is a jQuery plugin named jquery-fullscreen that will do exactly what you want. Until the Fullscreen-API standard has crystallized this is probably the best option.
You can also use the Modernizr fullscreen-api check and shim it if the browser doesn't support it by firing the event yourself (see this question for a detection method)
I'm using this :
Event.observe('${action.extUnenrolledListId}List', 'DOMNodeRemoved', function(event) {
}
It works in Firefox, but in IE8 the DOMNodeRemoved event isn't recognized.
Any ideas about an alternative?
No. IE up to and including version 8 does not support any of the DOM mutation events. There's no equivalent.
UPDATE
From #4esn0k's comment, it seems that it is possible to simulate DOMNodeInserted in IE using behaviors (untested).
I am trying to trigger the onScroll event this way using prototype:
Event.observe(document, 'scroll', function(){
alert('boo');
});
It works perfectly on Firefox, but nothing happens on IE. Does anyone know why? and if there is another way to do so?
Thanks
Try attaching it to the window instead:
Event.observe(window, 'scroll', function() {
alert('boo');
});
Works for me on IE, FF. Honestly, I don't know why it would work attaching it to the document.
Don't know if anyone is still following this answer, but i thought i would put down some of the information i found. In general the scroll event is supported on "window" on the following browsers below...
IE 5,6,7,8 (don't know about 9)
FF all versions
Safari 3.0.. up
Chrome
Opera 9.0.. up
However, when it comes to the document, it is not supported on any of the IE versions. Now, the funny thing is the Iphone 3G browser is the reverse of IE. The scroll event only works on the document. For more info on this, check out http://www.quirksmode.org. This site has alot of good stuff on event handling. Hope this helps someone...