🔰"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>.

🗺️ 圖表

mouse event coordinates

👉 compare：Element+boxes

Element+boxes

🧨 雷區

If you tap the screen, you’ll get

• touch events："touchstart", "touchend", then
• mouse events："mousedown", "mouseup", "click"❗

💈範例

• 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);
})

📗 參考

• Eloquent JS ⟩ Ch. 15: Event Handling ⟩ Mouse Clicks

📘 手冊

• Event ⟩ UIEvent ⟩ MouseEvent ⟩

  • click event