JS events - garść info

Kilka przydatnych informacji przy pracy z eventami. Do dzieła.

Ok, markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">Click me</button>
    <script src="./multipleevents.js" defer></script>
</body>
</html>

Teraz JS:

let btn = document.querySelector("#btn");

btn.addEventListener("mousedown", function(e){
    alert("Button clicked");
});

btn.addEventListener("mousedown", function(e){
    if(e.button !== 2)
       return;
    alert("Button right clicked")
});

Dlaczego mousedown? Cóż, click event działa na lewy click. Prawy click to event 'contextmenu’. A my potrzebujemy coś wspólnego, co pokaże nam czym jest propagacja „wszerz”.

Dlaczego return? Nie wszystkie eventy posiadają możliwość wykonania preventDefault, mouse eventy tego nie mają. Więc aby wyjść z eventu mamy return (to jest jedna z opcji).

Ok, klikamy lewym, jeden event, klikamy prawym… dwa eventy. To jest właśnie propagacja wszerz, natychmiastowa propagacja. Możemy ją zatrzymać:

let btn = document.querySelector("#btn");

btn.addEventListener("mousedown", function(e){
    e.stopImmediatePropagation();
    alert("Button clicked");
});

btn.addEventListener("mousedown", function(e){
    e.stopImmediatePropagation();
    if(e.button !== 2)
        return;
    alert("Button right clicked")
});

Tylko teraz zarówno prawy jak i lewy dają pierwszy event. Bo tak to działa, że eventy na tym samym poziomie są uruchamiane w kolejności. I jak robimy prawy klik to robimy klik, odpalamy pierwszy event. Który blokuje propagację wszerz i się odpala.

Świadomi tego, jak to wszystko działa możemy napisać kod, który da nam oczekiwany rezultat:

let btn = document.querySelector("#btn");

btn.addEventListener("mousedown", function(e){
    if(e.button !== 0)
        return;
    e.stopImmediatePropagation();
    alert("Button clicked");
});

btn.addEventListener("mousedown", function(e){
    if(e.button !== 2)
        return;
    e.stopImmediatePropagation();
    alert("Button right clicked")
});

Sprawdźmy, czy ogarniamy co tu się dzieje. Więcej o eventach niebawem.

JS events – garść info