click et contextmenu sont sur un bateau

Quelques petites joyeusetés rencontrées ses dernières semaines au boulot en manipulant les événements click et contextmenu (click droit).

<!DOCTYPE html>
<html>
    <head>
        <title>Click & contextmenu</title>
        <meta charset="utf-8">
        <style>
            div {
                width: 10rem;
                height: 10rem;
                background: green;
            }
        </style>
    </head>
    <body>
        <div></div>           
    </body>
</html>
Code html de test.

Contextmenu au niveau du document

const onEvent = (e) => {
    e.preventDefault();
    e.stopPropagation();
    console.log(`Event: ${e.type}`);
};
const div = document.body.querySelector('div');
div.addEventListener('click', onEvent);
div.addEventListener('contextmenu', onEvent);
document.addEventListener('click', onEvent);
document.addEventListener('contextmenu', onEvent);
Code javascript
Événéments boutons de souris sous Firefox 63.
Actions Événements
Click dans la div click
Click droit dans la div contextmenu
Click hors de la div click
Click droit hors de la div contextmenu + click

Attention donc lorsqu'on écoute les événements right-click sur le document

Rapport de bug : Fire middle/right-click events at content and remove click hack.

Ordre des événements

const onEvent = (e) => {
    console.log(`Event: ${e.type}`);
};
const div = document.body.querySelector('div');
div.addEventListener('mousedown', onEvent);
div.addEventListener('contextmenu', onEvent);
div.addEventListener('mouseup', onEvent);
Code javascript
Ordre des événements dans Firefox lors d'un click droit.
Action Linux Windows
DOWN mousedown mousedown
contextmenu
UP mouseup mouseup
contextmenu
Titre
Javascript Madness: Mouse Events
Auteurs
  • Jan WOLTER
Éditeur
unixpapa
Date