How to run function before fullscreenchange in Javascript - javascript

I have a function in Javascript that need to be called BEFORE event fullscreenchange occurs.
As stated on MDN, The fullscreenchange event is fired immediately AFTER the browser switches into or out of fullscreen mode.
Is there's any thing like this:
document.addEventListener('beforefullscreenchange', handlerFunction);
Thank you

Related

How to add listener whether the function do if user open web browser's console

I'm working on React, but I want to execute the function only if the user open the web browser's console. I don't know that should I use the window.addEventListener or something else that like useEffect() that has a empty dependency array but run when user open web browser's console instead.
Is the React has an event listener that detect if user open the web browser's console.
Sir, There a simple way of doing this would be to check when the window is resized. Since you can't check the console without resizing the page, it would work (this works with both horizontal and vertical dev tools)
window.addEventListener('resize', function () {
console.log('You resized this window or accessed the console.');
});
If an event listener is added to an EventTarget from inside another listener — that is, during the processing of the event — that event will not trigger the new listener. However, the new listener may be triggered during a later stage of event flow, such as during the bubbling phase.
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

Would onClick event work on touch on touch-screen devices?

I've used onclick events in my website. But when I open it in google chromes' developer mode's mobile view, nothing happens on touch on the elements which work on click with mouse. So my question is:
Do I have to also add ontouch events along with onclick events, or onClick event work on touch on all touch-screen devices?
P.S: You can see all of my codes here: https://github.com/SycoScientistRecords/sycoscientistrecords.github.io/
Or at the live website: http://sycoscientistrecords.github.io
And no I haven't tested the website on real phone.
onclick works fine on touchscreens; I've used it several times and have never had any problem.
You could consider using onmousedown instead of onclick. Or use jQuery to detect taps.
I found this detailed writeup at MDN very helpful. In particular:
the browser may fire both touch events and mouse events in response to the same user input [emphasis mine]
and
the element's touch event handlers should call preventDefault() and no additional mouse events will be dispatched
So, your touchstart or touchend listener can call evt.preventDefault() and your mousedown / mouseup listeners won't fire because they come later in the chain.
In Angular, I was able to detect whether I'd clicked a button using my mouse or my laptop's touchscreen, by changing (click)="doSomething()" to (mouseup)="doSomething(false)" (touchend)="doSomething(true); $event.preventDefault()". The method is called with true for touch events and false for mouse events.
onclick may not work on touch devices, I had this issue and the event ontouchstart sorts it.
if you use ontouchstart and onclick watch that you don't trigger the event twice.
this is another post related
onClick not working on mobile (touch)
New browsers have a pointerType which determines if the onClick is made by a mouse or via a touch. If you just want make adjustments in user behavior based on the input, using pointerType is the safest way.
if you are using jQuery:
$(selector).click(e => {
if (e.pointerType === "mouse") {} // mouse event
else {} // touch event
});
if you are using vanilla JS:
element.addEventListener('click', e => {
if (e.pointerType === "mouse") {} // mouse event
else {} // touch event
});
If you are using React, the event is wrapped around a synthetic event. To access the pointerType, you have to use the nativeEvent of the react event. Here is what you need to consider (especially if you are using Typescript). If the event is triggered by a mouse, the native event is an instance of MouseEvent which does not have pointerType, so, first you need to check the type of native event which will also take care of the typing problems in TS
<div
onClick={e => {
if (e.nativeEvent instanceof PointerEvent && e.nativeEvent.pointerType === 'touch') {} // Touch Event
else {} // Mouse Event
}}
></div>
Pro tip: If you want to test the touch event in development, use Chrome following this. Note that Safari has a responsive mode which simulates the framework of iPhones and iPads. However, Safari always registers a mouse event even when you are in responsive design mode and have selected an iPhone or iPad.

onmousewheel, on window or document?

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.

Using onpopstate in an Chrome Extension for Facebook

I'm trying to create a Chrome plugin for facebook and I'm using onpopstate event to check when the user goes to another page. The only problem is that the onpopstate doesn't fire.
This is the (simple) code I'm using:
window.onpopstate = function() { console.log('pop'); };
this is a screen of the problem:
As you can see the pushState code is called, but the onpopstate listener is not.
Do you know what's happening here?
#enhzflep's answer is in the comments above and not immediately obvious. From MDN:
Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.
In other words, the onpopstate event shouldn't be firing in this case.

Fullscreen API: Which events are fired?

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.

Categories

Resources