🔰"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>.
If you tap the screen, you’ll get
touch events："touchstart", "touchend", then
mouse events："mousedown", "mouseup", "click"❗
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);
})Event ⟩ UIEvent ⟩ MouseEvent ⟩
Last updated
Was this helpful?