I'm trying to completely remove the vibration that occurs on a long press of an element in a mobile browser.
Specifically, I have an image that I'm adding my own long-press functionality to, but the subtle short-vibrate that happens by default is interfering and I need to disable it.
I've successfully stopped the usual context menu from appearing by overriding it as follows:
window.oncontextmenu = function (event) {
event.preventDefault();
event.stopPropagation();
return false;
};
I've also added CSS to stop highlights and text selection etc - but I haven't been able to figure out what's causing the default vibrate after a few hundred ms.
Is there another lifecycle event that's popped on a long-press in a mobile browser, in or around oncontextmenu?
Full plunker Example here, long-press on the image from a mobile browser (I'm using chrome on Android) to see what I mean: https://plnkr.co/edit/y1KVPltTzEhQeMWGMa1F?p=preview
Disable the text selection when its clicked on.
document.querySelector("#your_target").addEventListener("touchstart", (e) =>
{
e.preventDefault();
e.stopPropagation();
this.style.userSelect = "none";
});
document.querySelector("#your_target").addEventListener("touchend", (e) =>
{
e.preventDefault();
e.stopPropagation();
this.style.userSelect = "default";
});
You could use touch-action: none; in CSS. Then you might be able to handle an interaction event to do what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Related
I am working on an application using javascript and I want to get mouse events. To stop the options that appear when right clicking I use the preventDefault() function and it works in Firefox and Chrome but it doesn't work in Safari. This is my code:
document.querySelector("#GL-Surface").addEventListener("mousedown", function(e) {
e.preventDefault();
/* Handle mouse events */
});
From an other question I got that you should return false; but this still doesn't work. preventDefault() however works in Safari when it is used in keyboard inputs. So how can I prevent the default actions for mouse events in Safari?
To target right click events, use contextmenu rather than mousedown.
document.querySelector("#GL-Surface").addEventListener("contextmenu", function(e) {
e.preventDefault();
});
Note that the options that appear on right click do appear only when the right click button is released, so I don't think mousedown is at all suitable here.
I'm trying to make a simple loading spinner that pops up when navigating. It shows up using a 'beforeunload' event when navigating away and uses the 'load' event to hide itself again when it is done.
The problem is that when I leave the page in the background on my phone for e.g. a few hours the 'beforeunload' event triggers and displays the spinner. Probably because Chrome on Android is partially unloading the page to save memory. The spinner doesn't go away by itself though and I can't seem to figure out how to make it disappear again in an elegant way.
Is there any other event I should be using instead?
window.addEventListener("load", function() {
topSpinner.classList.add("closed");
});
window.addEventListener("beforeunload", function() {
topSpinner.classList.remove("closed");
});
Chrome 68 (July 2018) introduced a new Page Lifecycle API: the state diagram supplied in this link does not show the System (browser) calling beforeunload before putting the page into the frozen state, but that is clearly what is happening.
Helpfully, the API introduced two new events that trigger as the page enters and exits this state: freeze and resume.
I've solved this problem on both mobile chrome and webview displays simply by adding this:
document.addEventListener('resume', (event) => {
// The page has been unfrozen: remove the spinner if it's active
topSpinner.classList.add("closed");
});
Change the load event listerner to focus
Try to persist a loader flag via localStorage, so if the page then reloaded, check the flag again:
Pseudo code below:
$(document).ready(function() {
$('#loader').hide();
localStorage.setItem("loader", false);
window.addEventListener('beforeunload', showLoader);
});
var showLoader = function() {
var isShow = localStorage.getItem("loader");
if(!isShow){
$('#loader').show();
localStorage.setItem("loader", true);
}
};
I've logged events via Ajax to database. My tests showed, that it's not predictable which events were triggered (i.e. when using PWA). There are focus, visibilitychange, resize and beforeunload involved. I was surprised about when switching screen on with active PWA, sometimes beforeunload is the only events that has been logged to database.
I'm using the following code now, that I've found at Kleiderliebe, which seems to work without sideeffects:
var visibilityState = 'visible';
window.addEventListener('beforeunload', function(e) {
if (visibilityState === 'visible') {
loader.show(e);
}
});
window.addEventListener('focus', loader.hide);
window.addEventListener('resize', loader.hide);
window.addEventListener('visibilitychange', function(e) {
visibilityState = document.visibilityState;
if (visibilityState === 'visible') {
loader.hide(e);
}
});
How to disable contextmenu in chrome while on a touch screen. This pops up on selection/on long tap of any text. Is there any solution which we can manage using css or javascript.
you can try to add a listener, that catchs every touch on a section
document.getElementById('yoursection').addEventListener('touchstart', (event) => {
event.preventDefault();
})
but note, that in that section nothing more can be touched ...
I'm struggling to disable default taphold browser event. Nothing that I have found on Google provided any help. I have only Android 4.4.4 mobile and Chrome dev tools for testing. I tried CSS fixes, such as webkit-touch-callout and others, but apparently they don't work for Android, also they don't work in Chrome dev tools.
I also tried detecting right click, (e.button==2), it doesn't work.
I came up with a solution, but it solves one problem and creates another. I just want to have a custom action for 'long press' event for selected anchors and I don't want the default pop up to appear (open in a new tab, copy link address, etc.)
This is what I did:
var timer;
var tap;
$("body").on("touchstart", my_selector, function(e) {
e.preventDefault();
timer = setTimeout(function() {
alert('taphold!');
tap=false;
},500);
});
$("body").on("touchend", my_selector, function() {
if(tap) alert('tap');
else tap=true;
clearTimeout(timer);
});
It successfully disables the default taphold event and context menu doesn't appear. However it also disables useful events, such as swipe. The links are in a vertical menu and the menu is higher than the screen, so a user has to scroll it. If he tries to scroll, starting on an anchor, it won't scroll, it will alert 'tap!'
Any ideas how could I disable taphold default or how could I fix this code so it disables only tap events and leave default swipe events enabled?
Edit: Now I thought about setting a timeout, if the pointer is in the same place for lets say 100ms, then prevent default action. However e.preventDefault(); doesn't work inside setTimeout callback.
So now I'm just asking about the simplest example. Can I prevent default actions after certain amount of time has passed (while the touch is still there).
And this is my whole problem in a fiddle. http://jsfiddle.net/56Szw/593/
This is not my code, I got this from http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/
Notice that while swiping the box up and down, scrolling doesn't work.
I got the solution. It was so simple! I had no idea there's an oncontextmenu event. This solves everything:
$("body").on("contextmenu", my_selector, function() { return false; });
For an <img> I had to use event.preventDefault() instead of return false.
document.querySelector('img').addEventListener('contextmenu', (event) => {
event.preventDefault();
}
I'm trying to find a way to avoid triggering the back/forward in the browser when the user uses a 2-finger scroll (eg: OSX).
just like this:
https://tweetdeck.twitter.com
Mobile devices are notoriously annoying for handling touch events. However, if you return false or preventDefault() on a DOM touch event you will prevent the browser from scrolling/zooming/navigating.
The below example will prevent all touches from executing default behavior; meaning link touches won't register, scrolling won't work etc.
$("body").on("touchstart", function(e){
e.preventDefault();
});
The following will prevent default functionality of multi touch.
$("body").on("touchstart", function(e){
if (e.originalEvent.touches.length == 2) {
e.preventDefault();
}
});
If you need to allow the user to click links, you would do something along the lines of the following.
$("body").on("touchstart", function(e){
if (e.target.tagName != "A") {
e.preventDefault();
}
});