🔰"click"

browser ⟩ event ⟩ type ⟩ mouse ⟩ "click"

After the "mouseup" event, a "click" event fires on the most specific node that contained both the press and the release of the button.

For example： "mousedown" on <p> #1, then "mouseup" on <p> #2, the "click" event will happen on the parent that contains both <p>.

👉 compare：Element+boxes

click to move ball
draw dots
closing button [x]
click to move ball
click to slide (carousel)
replit ⟩ mouse "click" event

// general handler
const logTarget = (event, type) => {
    const len = 'mousedown'.length;
    const t = event.target;
    log(`🔘 ${type.padEnd(len, ' ')}: <${t.nodeName}> ${t.id ? '#' + t.id : ''}`);
};

// register handlers for mouse events
['mousedown', 'mouseup', 'click'].forEach(type => {
    window['on' + type] = e => logTarget(e, type);
})

Previous.button Nextdraw dots

Last updated 2 years ago

Was this helpful?