Open
Bug 1004895
Opened 11 years ago
Updated 3 years ago
mouseup does not trigger a click event on the current item
Categories
(Core :: DOM: Events, defect, P5)
Tracking
()
UNCONFIRMED
People
(Reporter: info, Unassigned)
References
Details
Attachments
(1 file)
|
1.26 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36
Steps to reproduce:
Use the attached test case to reproduce the issue.
CASE 1 - Correct behavior
1. Hover over the grey box. Press and hold the left mouse button.
2. Release the left mouse button.
Expected output:
Mousedown event
Mouseup event
Click event: Target: [object HTMLDivElement]
Actual output:
Mousedown event
Mouseup event
Click event: Target: [object HTMLDivElement]
CASE 2 - Invalid behavior
1. Hover over the grey box. Press and hold the left mouse button.
2. Move the mouse to an unoccupied white region (below the two div elements!)
3. Release the left mouse button.
Expected output:
Mousedown event
Mouseup event
Click event: Target: [object HTMLHtmlElement]
Actual output:
Mousedown event
Mouseup event
CASE 3 - Correct behavior
1. Hover over the grey box. Press and hold the left mouse button.
2. Move the mouse on top of a text node in the output window. (e.x., hover over the "Mousedown event" text)
3. Release the left mouse button.
Expected output:
Mousedown event
Mouseup event
Actual output:
Mousedown event
Mouseup event
Actual results:
Case 2 does not produce the expected results in Firefox, but does produce that result in IE11 and Chrome 34.
Expected results:
All cases should produce identical expected output. Please note Case 3: it IS possible to have a situation where not receiving a click event is expected. Since this behavior is the same in IE11 and Chrome 34 I'm expecting this to be a standard.
Workaround: Override document.onmouseup event and check if e.target is the same element the mousedown was performed on. If not: trigger code for click event manually. Else: do nothing.
|
||
Comment 3•11 years ago
|
||
Per spec click event should be dispatched only if mousedown and up happen on the same target.
Where does it say that in the specifications? Because if it does, I'm going to have to file a bug report with AT LEAST Chrome and IE. They both exhibit this behavior.
|
||
Comment 5•11 years ago
|
||
https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html
5.2.3.2 Mouse Event Order
[Each implementation will determine the appropriate hysteresis tolerance, but in general SHOULD fire click and dblclick events when the event target of the associated mousedown and mouseup events is the same element with no mouseout or mouseleave events intervening, and SHOULD fire click and dblclick events on the nearest common ancestor when the event targets of the associated mousedown and mouseup events are different.]
|
|
||
Comment 6•11 years ago
|
||
It looks like none of them did it in the right ways, but in general SHOULD, not MUST.
|
|
||
Comment 7•11 years ago
|
||
I checked it carefully and Firefox totally not suport situation when mousedown has one target but mouseup has another target - click event is never generated. IE and Chrome have correct behaviour (if we compare with D3E).
Referring to the above example and why in IE and Chrome sometimes we don't get click. Probably it's small bug, because when we make mousedown in element A, mouseup on element B, but add event handler to catch this mouseup and insert to DOM some markup (via innerHTML like in above example), then click event is not generated. If we don't add anything to DOM then click event is generated. Handling mousedown and add markup doesn't block click event.
Fast test:
<!DOCTYPE html>
<html>
<head>
<style>
* { outline: none; }
body > * { outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
</style>
<body>
<div style="background-color: #CCC; border: 1px solid #888;" id="dragel">
Drag me to a below paragraph to receive click events
</div>
<p>Some paragraph test.</p>
<div id="output" style="border: 1px solid #888;"></div>
<script>
var elem = document.getElementById("output");
window.addEventListener("click", function(e){
elem.innerHTML += "e.type: " + e.type
+ "<br>" + "e.target: " + e.target + "<br><br>";
});
</script>
</body>
</html>
|
||
Updated•7 years ago
|
Priority: -- → P5
|
||
Updated•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•