ContextMenu event doesn't fire in mobile browsers - javascript

ContextMenu event doesn't work at cell phones? I use simple addEventListener("contextmenu", handler). It fires in Chrome Dev Tools, but doesn't fire in real cell phones. I tried it in Android and Windows Phone.
How to make it work?

What version of Chrome / Browser on Android and which version of Windows Phone are you using?
It may be worth adjusting your code to see if the document.addEventListener function is defined, if not then fallback to the older 'attachEvent' function.
Try this:
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
// handler
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
//handler
});
}
Also, what is it you are trying to achieve by overwriting the default context menu behaviour?
When you say '...doesn't fire at real cell phones', does the document.addEventListener line not get hit, or does your handler function not execute correctly. Can you post your handle function code?

Related

Mobile firefox click and hold events

I am trying to make simple webapp where an element can be clicked or hold to call different function.
$(document).on("click",'.element', function() {
clickFunction();
});
let timeoutId = 0;
$(document).on('pointerdown','.element', function() {
timeoutId = setTimeout(holdFunction, 500);
}).on('pointerup pointerleave', '.element', function() {
clearTimeout(timeoutId);
});
And it was tested and worked fine on Chrome, Firefox and mobile Chrome.
The problem is that on mobile Firefox the 'pointerdown' event is not called at all and i don't really know why.
It turns out that mobile firefox browser is not supporting pointer events.
To check if browser supports pointer events simply use
if (window.PointerEvent)
On mobile firefox one should use touch events (touchstart, touchend, etc.)
It is also worth mentioning that if you don't want to call holdFunction while holding element and scrolling the the same time, the code for pointer events given in the question will work fine but when using touch events you probably will need additional check if window was scrolled
$(window).scroll(function(event){clearTimeout(timeoutId);});

Prevent default 'ctrl pageup' and 'ctrl pagedown' in Chrome

I have some code to create hotkeys for a web application. All of the hotkeys work in IE and Firefox, however Ctrl+PgUp and Ctrl+PgDn are not working in Chrome.
After digging around for answers and writing some custom test code, I believe I have determined that this is because those events fire, in Chrome, on keyup instead of keydown.
The default Chrome handlers for those events are firing instead of mine (or at least first) and switching the browser to the next or previous tab. If I use the hotkey to switch back to the tab with my application then my handlers catch the event.
So my question is, is there any way to catch these events in Chrome and prevent the default functionality from running?
The code in question is:
//These work in IE and Firefox
$(this).bind('keydown', 'ctrl+pageup', (evt) => {
this.prevPage();
return false;
});
$(this).bind('keydown', 'ctrl+pagedown', (evt) => {
this.nextPage();
return false;
});
//These catch the event in chrome, but it's too late
$(this).bind('keyup', 'ctrl+pageup', (evt) => {
this.prevPage();
return false;
});
$(this).bind('keyup', 'ctrl+pagedown', (evt) => {
this.nextPage();
return false;
});
It does exactly what I want in IE and Firefox, but not Chrome. I have tried evt.preventDefault(), evt.stopImmediatePropagation and evt.stopPropagation. However, it does not work (I believe because my handlers are being called after the browser handlers).
Check a similar question on this link:
Chrome - Javascript prevent default Ctrl + MouseWheel behavior
They say its impossible on chrome and its still being addressed!

unload event issue in chrome and Firefox

I tried to use unload event, but it seems NOT work in Chrome or Firefox. So I tried another way, the issue is the pagehide callback seems never invoke:
if ("onpagehide" in window) {
window.addEventListener("pageshow", function(){alert("enter page")}, false);
window.addEventListener("pagehide", function(){alert("leave page")}, false);
} else {//for IE
window.addEventListener("load", function(){alert("enter page")}, false);
window.addEventListener("unload", function(){alert("leave page")}, false);
}
I'm not sure about Firefox but Chrome will ignore any alerts called from window.onunload. It will also not let you change any part of the URL, and possibly other things. That may be why it looks like the event isn't firing. To check whether it's firing you can return a string from the handler function, which brings up one of those "Are you sure you want to leave this page?" message boxes.

Is there any way to use window.onbeforeunload on Mobile Safari for iOS devices?

Looks like Apple has disabled the window.onbeforeunload event for iOS devices (iPhone, iPad, iPod Touch). Unfortunately I can't find any documentation as to why this event doesn't work in Mobile Safari.
Does anyone know if there's a reliable alternative to this function? Android's browser appears to support it just fine, and the Safari desktop application also supports the onbeforeunload event without issue.
I see that it's an old question, but i faced this problem recently.
I'm using window.unload and it works fine in ios browsers (although if you look at Apple documentation it seems to be deprecated and they recommend to use document.pagehide)
If you really need it, you cant just get all links, forms and DOM objects that have a handler changing the url and make those wait until you've done what you want.
For the links, you get them by getElementsByTagName, check if the href starts with anything but a # and just add your onbeforeunload function add onclick (which will be invoked before the href is looked at).
Same for the forms but with onsubmit.
And finaly, for the elements changing the href with JavaScript, you should make sure when you add the lsitener that you call your onbeforeunlaod function (or, if you use DOM0 or DOM1 listeners, you can just add some class and then use a global script that checks all elements with the class and adds it to the event listener with a closure.
But you should normaly be able to avoid the use of this event (probably using cookies to store the thing you wanted to send every x seconds and allowing to, in the worst case, have a look at it next time the user loads a page and, in the best case, be able to send an Ajax request at onbeforeunload or onunload which, even if it sends only the http headers, woudl allow you to get what you want).
Based on Xavier's answer, I devised a solution along these lines:
function doStuff() {
// here goes your logic
}
function isSafariMobile() {
return navigator && /Safari/.test(navigator.userAgent) && /iPhone|iPad/.test(navigator.userAgent)
}
function addWatcherToLinks(baseNode) {
if (!baseNode || !baseNode.querySelectorAll) { return; } // ignore comments, text, etc.
for (const link of baseNode.querySelectorAll("a")) {
link.addEventListener('click', doStuff);
}
for (const form of baseNode.querySelectorAll("form")) {
form.addEventListener('submit', doStuff);
}
}
// ...when the page loads...
// we watch the page for beforeunload to call doStuff
// Since Safari mobile does not support this, we attach a listener (watcher) to each link and form and then call doStuff.
// Also, we add such a watcher to all new incoming nodes (DOMNodeInserted).
if (isSafariMobile()) {
addWatcherToLinks(document);
window.addEventListener("DOMNodeInserted", (event) => { addWatcherToLinks(event.target); }, false);
} else {
window.addEventListener('beforeunload', doStuff);
}
This solution has some limitations. The biggest one is that it attaches itself to all forms and all links. Sometimes this might not be desired. If you need it you can skip some nodes (e.g. mark them with a particular data- attribute).
I was having the same problem. it seems safari browser in iphone triggers only focus and blur events and almost every other event is not triggered, e.g.(pagehide, pageshow, visibility change) but the good news is focus and blur event are supported and triggered on iphone, ipad & android mobiles as well.
window.addEventListener('focus', function(){
// do stuff
});
window.addEventListener('blur', function(){
// do stuff
});
hope this helps anyone.

jQuery 1.4 change(), checkbox and IE

I have a page with a checkbox that is set to checked when the page is loaded. If/when the checkbox is unchecked I need to run a function. The following code works fine in all browsers with the exception of IE. In versions 7 and 8(haven't even tested 6) it works but you are required to uncheck it, check it, then on the second uncheck it executes the function. The jQuery documentation states: "As of jQuery 1.4 the change event now bubbles, and works identically to all other browsers, in Internet Explorer"... but it doesn't seem to work. Any ideas?
The code:
$('#checkbox').change(function() {
// do something
});
Upgrade to jQuery 1.4.2+ to resolve this. The 1.4.2 release included several changes/fixes for events.
This change event, change bubbling in IE (big one for many people), and lots more was fixed in that release, upgrading will resolve your issue :)
If you want to stop event bubbling, use
$('#checkbox').change(function(event) {
event.stopPropagation();
// do something
});
Perhaps you could also do something like
if ($.browser.msie) {
$('#checkbox').click(function() { // assuming this will be fired for keyboard as well
$(this).change();
});
};
This may force the event.

Categories