I need to know which (DOM) events are fired when a user enter the fullscreen mode via the new Fullscreen API. I tried for example this snippet but it doesn't fire:
jQuery('body').on('fullScreenChange', function() { alert("Fired!"); });
I was using:
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', fn);
It fires for Safari, Chrome, and Firefox (haven't tested others).
There seems to be a subtle difference in the resulting context between webkit and moz,
element height and width are different. But the events fire, which is your question.
Oh. And watch out for using alert('fs') with full screen testing. It often interferes with the screen change.
Your link shows the answer...
When full-screen mode is successfully engaged, the document which contains the full-screen element receives a fullscreenchange event. When full-screen mode is exited, the document again receives a fullscreenchange event. Note that the fullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting full-screen mode, but if the document has a non null fullScreenElement , you know you're in full-screen mode.
There is no fullscreenChange event in native jQuery. But there are several third-party plugins which provide you access to the event:
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
https://github.com/ruidlopes/jquery-fullscreen/blob/master/jquery.fullscreen.js
https://github.com/hdragomir/jQuery-Fullscreen-Event
https://github.com/ruidlopes/jquery-fullscreen
As you can see on their code there is no clean API access to this type of event.
Related
I have a webapp with an inner-pane inside an outer-window.
The user can zoom-in in the inner-pane via 2-finger pinch, without zooming-in the outer-window.
On Chrome on Android, the app works as expected.
But Safari on iOS device (iPad), zoomimg-in inside the inner pane, actually zooms-in the entire window, which is not the intended behaviour.
I read here that iphone/ipad can trigger unexpected events.
I want to find this event.
I remote-debug the webapp iOS Safari by connecting the iPad to a Macbook and debugging via Safari.
In Safari Web Inspector, Sources tab, Breakpoints section, I added All Events.
When I touch the pane, the code breaks as expected on the ontouchstart event, which is not the offending event.
I can add specific events to break on, by name.
But because I don't know which is the offending events, I want to break on all events except the ontouchstart event.
Is it possible to stop on all events in Safari except specified events?
Thanks
I did not find out if it is possible, to break on all events excluding specific event(s).
I recently found this link which comprehensively explains various breakpoint options in Safari.
The author of the link graciously answered my question:
Currently there is no way to exclude specific events.
In your scenario, is it really necessary to add listeners for all events, or is it a known list of specific events (e.g. all touch and mouse)?
If it's the latter, I'd suggest just adding a global event listener breakpoint for each event other than the one event you want to exclude.
Another option might be to configure an All Events global event listener breakpoint with a condition of something like window.event.type !== "..."
(note that this will only work in Safari Technology Preview 114 or newer).
p.s.
The reason for my question was an upstream offending event listener.
Because the problem was in an event listener that is upstream to the target event, it wouldn't have helped to break on all events excluding specific event(s).
I ended-up solving my original problem by applying addEventListener with passive = false, and using preventDefault() to prevent from triggering the upstream event handlers in the bubbling stage.
I wrote React component which listens to few types of js events (click, scroll, keyup). For the first time it seems work's well, but I noticed that on my IPad click events are ignored. I attached my Ipad to Safari remote debugger but haven't found any errors in console.
I think the problem is in the following line.
const windowClickStream = Rx.Observable.fromEvent(window, 'click');
it works in Chrome and Desktop Safary but doesn't work on my Ipad.
My question is:
how to get portable Rx stream of all click events on the web page?
I had a similar problem few months ago and solved this by changing the event listener. The "click" event is at first for desktop applications with a real mouse or touchpad. It takes 300ms until the event is triggered because the browser waits for an additional click to trigger a "dblclick" event. The webkit browser fire an "touchstart" event immediately after you touch the screen.
I am experimenting with scroll events and in a few scripts that I have looked at I found this line:
window.onmousewheel = document.onmousewheel = somefunc;
This is working as intended, the somefunc is triggered on scroll. My problem is that Chrome is triggering the function twice (obviously because Chrome is responding to both the window and the document event). I would like to know why both events are used, is it due to cross browser compatibility? If so, which browser prefer which event? I would like to choose only one of the events, but I don't know which.
if you have frames in your html, they are not included in the document, and thus the mouse wheel event won't be triggered.
I am currently trying to use the <video> tag to, obviously, display videos. If the user clicks on the video (or poster image) it will trigger my script to set the video to fullscreen through the requestFullScreen method. When I exit fullscreen mode, I attempt to catch this by using a listener like so:
document.addEventListener('fullscreenchange', function() {
// This is never triggered, I never arrive here.
if (isFullScreen) { // do something}
else { // do something else}
}
I have similar listeners for mozfullscreenchange, msfullscreenchange and webkitfullscreenchange.
Now my problem is that for some android devices with some browsers, the listener is not triggered. For instance, on a Samsung Galaxy Note the listener is not triggered when using Chrome, while when using Asus Transformer with Chrome it works. However, if I use Firefox on the same two devices, it only works on Samsung Galaxy Note and not the Asus Transformer.
Is there a simple explanation to this inconsistency? Have I done something wrong? Is there perhaps some different events I should listen to on different versions of Android and browsers?
You have missed the last outter right parenthesis.
Also two curly brackets are commented away.
I would like for a button to react to 'touches' on a touch screen, and 'clicks' on a non-touch screen. In case of a touch screen, I only want the touchstart handler to direct my flow and prevent the system from further handling the click event.
For this, I added two event listeners to my button. One listens for touchstart events. Once a touchstart has been detected, it uses event.preventDefault() to cancel the click event.
The code below on a touchscreen in Chrome, Opera and Android browsers achieves the desired result:
- one alert saying "touch".
However, in Firefox both events are detected, in spite of the preventDefault() in the touchstart handler:
two alerts... first one says "touch", followed by a second alert saying "click".
lginButton.addEventListener('touchstart', function(event) {
event.preventDefault();
alert("touch");
}, false);
lginButton.addEventListener('click', function(event) {
alert("click");
}, false);
Why is this happening and how can I achieve the desired results in all browsers?
I am currently unable to test. But based on your feedback it appears that Firefox is in fact not following the spec on events found here. I was about to find 4-5 bug logs on Mozilla that discussed this very topic, and finally found one that resolved the issue here https://bugzilla.mozilla.org/show_bug.cgi?id=977226. Definitely check to make sure you have the current version of firefox. And if you do it may be worth opening a new bug with mozilla on this. In the meantime you can set up a conditional inside of your touchstart event handler that detects the event type and handles touch and mouse events differently.. And then further adding more conditionals within you click conditional to handle browser and OS version. which is super bad practice, but would keep you going until a patch was implemented.