Open Bug 819102 Opened 11 years ago Updated 2 years ago

Mouse events still being fired when preventDefault() in called in touch event handlers

Categories

(Core :: DOM: UI Events & Focus Handling, defect)

ARM
Gonk (Firefox OS)
defect

Tracking

()

People

(Reporter: Margaret, Unassigned)

References

Details

(Keywords: regression)

Attachments

(1 obsolete file)

I'm seeing this while working on the Gaia keyboard app. I first noticed this with touchstart/mousedown, but I'm also seeing mouseup/mouseover/mousemove/mouseleave events being fired.
Chris has been hacking touch event handling in Gonk.
I suspect this is IPC related? i.e. you're not hearing back from the child process quickly enough to prevent the first mousedown?
The keyboard is a special snowflake because it runs in the master process.  However, preventDefault() should still work.  I don't have a guess about what might be wrong there.
This was broken by bug 775403 where we made preventDefault mean nothing. I think the series of changes after that made it so we can fix it though.
Depends on: 775403
Keywords: regression
Keyboards run OOP now right? Is this still a problem?
Flags: needinfo?(mwu)
I don't remember enough about this bug to say. Probably not actually a problem for keyboards anymore though now that they're OOP.
Flags: needinfo?(mwu)
Hello!

preventDefault on a touch event don't prevent the mouse event emulation

I'm writing a webapp for firefox, and I'm meeting this problem on firefox beta 28 for android (don't know if it touches other systems or not).

I made the following webpage to show you the problem (below). When you click on the text, you have the correct behaviour. but when you click (with your finger on a touchscreen) on the checkbox (make sure to zoom enough), you can see the bug. Moreover, the variable "i" is logged in the console, proving that a mouse event is sent, while it shouldn't...


code:
----------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bug preventDefault()</title>
</head>
<body>
	<p><input type="checkbox" name="check" id="check" checked /><label for="check">touch should only (un)check</label></p>
	<script>
		(function()
		{
			"use strict";

			var check = document.querySelector("#check"), i = 0;

			check.addEventListener("touchstart", function(e) {
				e.preventDefault();
				check.checked = !check.checked;
			});

			check.addEventListener("mousedown", function(e) {
				e.preventDefault();
				console.log(i);
				i++;
			});
		})();
	</script>
</body>
</html>
Example to test the reported bug. you have to test it from a touchscreen.
If you tap on the text, the checkbox acts correctly.
If you tap on the square of the checkbox (make sure to zoom enough), you'll see that 2 events are sent to the checkbox, so it doesn't act correctly. Moreover, you'll see in the console that a mouse event is sent while it shouldn't.
Comment on attachment 8383781 [details]
bug.html - example to test the problem (try to tap on the square of the checkbox)

Moved to bug 978154.
Attachment #8383781 - Attachment is obsolete: true
Depends on: 978154
Hi guys,

I have tested this issue using a test case from a duplicate bug (Bug 862557) on latest Firefox release (43.0.4), latest Nightly build (46.0a1-20160112030227) and the behavior is still reproducible. Any touch event is seen as mouse event. Verified the same test case on Chrome and it correctly works. 

Is still anyone involved in resolving this issue ?

Tested on Windows 8.1 and Windows 10 on a Dell XPS 12 laptop 2 in 1 with both mouse and touch capabilities.  

You can use this testcase to verify the problem http://jsfiddle.net/859jT/31/ .


Thanks,
Paul
Component: Event Handling → User events and focus handling

This bug still exists in Firefox 72.0a1 20191109093718 in touch emulation mode
Calling event.preventDefault() inside any touchstart, touchmove, or touchend does not cancel any following events although it should, according to https://w3c.github.io/touch-events/#cancelability

I can reproduce it here https://jsfiddle.net/v9bcqwp7/6/
if you click on the element it shows touchstart, touchmove, touchend and click events are all fired
but touchend calls event.preventDefault() which should not allow the click event to fire

I am having the same problem as angyongen. Calling event.preventDefault() on touchstart, touchmove or touchend event does not stop mouse and click event emulation from firing. I'm using Firefox 74.0 (64-bit) on Mac OS High Sierra (10.13.6). This is causing problems with my highly touch/mouse oriented web application. Hope you all can figure it out. It's a pretty handy tool otherwise. Thank you!

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.