Develop Reference

Google Chrome on mobile fires additional unwanted MouseEvent on file input

I've run into some event related issues with Google Chrome (78) on mobile. I have a setup where a file input (including the label) is appended when clicking a button. The file input will replace the button entirely and will be appended in exactly the same spot as where the button originally was.
On most browsers, this works fine. However, it seems that the mobile version of Google Chrome will fire a delayed click event after the initial touch on the button, causing the click to activate the file upload dialog. This click is fired on the file input, even though the file input was not even present during the initial touch.
It's not possible to stop the propagation on the button click, since I am listening for a TouchEvent, but the additional event is a MouseEvent. I'd rather not listen to the MouseEvent just to stopPropagation to prevent any cross browser issues. PreventDefault is also not an option, since the button is located in a slider, which would break the slider functionality.
Another option is to hide the file input until an event loop has passed (setTimeout of 0), which essentially fixes the issue, but I'm hoping for a more elegant solution. Do any of you have any potential fixes for the issues?
I've set up a CodePen with a minimal code example showcasing the issue: https://codepen.io/frankderouge/pen/wvvRPRV
The basic set up is that a file input is initially hidden and then shown when a button is clicked.
//This listener is added to the 'button'
document.querySelector('.toggle_off').addEventListener('touchstart', (e) => {
//This won't do anything since we're handling a touch event, not a click event.
e.stopPropagation();
//This fixes the dialog open but would break sliding functionality
//e.preventDefault();
//Hide the button
e.target.style.display = 'none';
//Then show the file input, on which the additional event will be triggered
document.querySelector('.toggle_on').style.display = 'block';
});
Thanks in advance!

It turns out this is known as a 'ghost click', which exists for compatibility reasons and is actually 'expected behavior'. I did not expect a ghost click to occur if the mouse event was not bound to the original element in the first place, but apparently this does happen in some browsers.
The ghost click can be prevented by calling preventDefaulton a TouchEvent, in the initial post I stated that:
PreventDefault is also not an option, since the button is located in a
slider, which would break the slider functionality.
But I've recently learned that it does not matter on which 'part' of the touch the preventDefault is called on since the ghost click is always triggered after all the touch events. Therefore the issue with the scrolling being prevented does not occur if preventDefault is called on the touchend, rather than the touchstart or touchmove.
document.querySelector('.element').addEventListener('touchstart', (e) => {
//Process the touch start event
});
document.querySelector('.element').addEventListener('touchend', (e) => {
//Prevent default on the touchend, preventing the ghost click from happening
//But still allowing the users to zoom and scroll
e.preventDefault();
});

How can I prevent a browser from generating ContextMenu event for a long touch

Browsers support touch events and might generate mouse events. Also, for a long touch the browser generates a ContextMenu event. However, in my industrial environment, I want all touch events to be handled like a click event. Is there a global setting to prevent the browser to generate context menu events? Or can I at least set the time when the browser will generate such an event?
My only solution I came up with so far is the subscribe to click and context menu events and call the same handler. However I would rather avoid this for every button in my application...
Any ideas?

There are several answers at Disabling the context menu on long taps on Android
But I think the most voted answer over there is not a good one.
Try and see if this work for you,
window.ontouchstart = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};

In JavaScript or jQuery, how to convert ontouchmove event into a basic click event on target

I am running my web app on Chromium on a touch device. It's an industry control panel, not a consumer tablet.
I have a problem when the user means to click (tap) on a button, but their finger moves a little, thus causing the 'ontouchmove' event to fire. I other words, the device reads it as a swipe instead of a click.
When this happens, the click event is not fired, so nothing happens, even though the button's hover is triggered. So, the user sees that their touch was registered (button changes color), but is then frustrated by the fact that nothing happens.
I'm hoping I can put something in index.html that globally converts these swipes into standard old-fashioned clicks.
document.ontouchmove = function() {
// get target of this event
// fire the click event of that target
}
Is this even possible? I have jQuery installed. Is something like hammerjs needed? I'd like to get by with plain old JavaScript, if possible.
Thanks

I'm not really sure but you can try it :
document.on("touchmove", function(e) {
$(e.target).trigger("click");
});

Any Javascript event occurring when user clicks Stop load button?

I want to run some Javascript when the user clicks the Stop Load-button (red X in most browsers) or hit Esc on the keyboard, which usually does the same.
I've seen questions here covering the Esc button by hooking onto document.body.onkeyup, but couldn't find anything covering mouse click on the Stop button.

Internet Explorer has a document.onstop event that is fired, but other browsers don't seem to support that. Note that it's fired when the user clicks Stop or hits Esc, OR if the user navigates to another page during page load, which has the same effect.
I don't believe there is a reliable way to trigger an event on clicking Stop in other browsers. Perhaps it would be possible to do something like: keeping the connection to the server open (as in the Comet approach), streaming some sort of keep-alive down the connection, and detecting if the stream ends (as I assume it would if the Stop button were clicked).

If it's images that are still getting loaded on the page, you can use the onabort event to monitor for the stop load.
Monitoring for the mouse click should be impossible, as it doesn't happen inside the current browsing window.

There isn't any cross browser way of doing this.
However, IE has a special event, onstop which occurs on the body when the stop button is pressed. You cannot override the stop button functionality (that is, you cannot cancel it), but you can detect that it has happened in IE.

Detects a click outside document

I am having a problem to detect a click event outside document, for instance in the closing button of the browser without using the onbeforeunload event, because I have a JSP page that is processing something, using meta refresh to give the status of the process evolution.
Since I am using meta refresh I cannot use window.onbeforeunload event to prevent/confirm the user to exit because the meta refresh will fire up the event. Thus, I need to check manually if the mouse will be clicked outside my document.
I can check if the mouse coordinates are outside, thus can´t associate an click event to that in IE8.
if (window.event.clientY < 82 && window.onclick)
Someone have any idea out achieve this issue?
Thanks in advance!

Detecting the close button isn't possible but you can detect if the user is losing focus of the browser by doing:
$(window).blur(function() {
alert('lost focus');
}

It's not possible. Events don't fire outside of the document, including clicks on the window chrome.

I think you will need to think about what you're trying to achieve. It sounds like a shaky design if you must get the close event of the page. Lots of other events will affect you if that is of a concern.
If you have a JSP page producing and showing the status by a meta refresh - what is your problem with the window closing? That should be of your concern, not how to detect a browser close event.