1912812 - setPointerCapture() causes an onclick event for the wrong element

Status: RESOLVED DUPLICATE of bug 1885232

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

Description

[Pete Gonzalez [:octogonz]]

Attachment: bug.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0

Steps to reproduce:

A complete repro file is attached.

The problem occurs when a control is using setPointerCapture() to behave like a button, for example this div:

HTML:

    <div
      class="button"
      onmousedown="buttonDown(event)"
      onmouseup="buttonUp(event)"
    >
      MOUSEDOWN HERE
    </div>

JavaScript:

      function buttonDown(event) {
        // The repro works even without this line:
        event.preventDefault();

        event.currentTarget.setPointerCapture(event.pointerId);
      }

      function buttonUp(event) {
        // The repro works even without this line:
        event.currentTarget.releasePointerCapture(event.pointerId);
      }

Steps:

1. Click on this "MOUSEDOWN" div, holding the mouse down.
2. Drag the mouse over some unrelated element on the page. Let's call that the "MOUSEUP" element.
3. Release the mouse over the "MOUSEUP" element.

Actual results:

In Firefox, the MOUSEUP element incorrectly receives an onclick event (but not mousedown or mouseup events). If it is an <a> tag, Firefox will wrongly navigate to its href URL. (This can be highly confusing, for example if the MOUSEDOWN control is a custom scrollbar, with no expectation to release the mouse within its client area.)

Expected results:

In Chrome, the MOUSEUP element does not receive any mouse events. This is correct behavior at that time the pointer is still captured by the MOUSEDOWN div.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: UI Events & Focus Handling' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Pete Gonzalez [:octogonz]]

• Also repros when using onpointerdown/onpointerup events instead of onmousedown/onmouseup.

• Does NOT repro with the Safari browser.

• Does NOT repro with Internet Explorer.

• Does repro with Firefox on macOS.

Comment 3

[Alice0775 White]

There are two regression window as follows.

#1 Regression window (click event will fire on <DIV>, but not on <A>):
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=f6eebcc14c22762f521fb567a9588963b8720592&tochange=61570c16c2d564c24fab36713fb169c4144453e9

Suspect: Bug 1089326

#2 Regression window (click event will fire on both <DIV> and <A>):
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=728f4a4d08f5b369ce5c7bea17a23cdfbb30f196&tochange=92ad9c748611fc9b5be547415a651f136a27346f

Regressed by: Bug 1792110

Comment 4

[Pete Gonzalez [:octogonz]]

Thanks for the quick investigation!

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

FYI: MouseEvent.pointerId is undefined on all browsers. So, you call setPointerCapture with 0 in the example. Firefox uses 0 for mouse, but Chrome and Safari use 1 for mouse. Therefore, the setPointerCapture call works only on Firefox.

About the click event target issue of setPointerCapture will be fixed in bug 1885232.

Comment 6

[Pete Gonzalez [:octogonz]]

Very helpful, thank you!