Exploring old Firefox bugs

Misbehaving click events

The bug

Firefox dispatches a click event from right click of a button, causing unexpected behavior with delegated event listeners on the window or document.

We would expect that primary click dispatches an event from the clicked element, and secondary click does nothing.

Secondary buttons (like the middle or right button on a standard mouse) MUST NOT fire click events.

Instead, the actual behavior is that a secondary click on an element results in a click event (including the element as the target), but the event is only visible to a listener on the window or document. The event listener on the target element itself is not fired, indicating the event is not dispatched from the clicked button element in a way that is bubbled up normally through the DOM, and it is not visible to ancestors other than the window or document.

Here’s a reproduction of this scenario, which you can also view on CodePen:

<button class="test-window">
  Test window
</button>

<button class="test-document">
  Test document
</button>

<button class="test-body">
  Test body
</button>

const buttons = {
  window: document.querySelector('.test-window'),
  document: document.querySelector('.test-document'),
  body: document.querySelector('.test-body'),
};

const test = element => event => {
  if (element === event.target) {
    console.log('Ancestor listener fired with matching event target element');
  }
};

window.addEventListener('click', test(buttons.window));
document.addEventListener('click', test(buttons.document));
document.body.addEventListener('click', test(buttons.body));

const testTarget = event => console.log('Listener fired on event target');

buttons.window.addEventListener('click', testTarget);
buttons.document.addEventListener('click', testTarget);
buttons.body.addEventListener('click', testTarget);

References

This appears to relate to the following issue: Bugzilla Bug 184051