✨draw dots

browser ⟩ event ⟩ type ⟩ mouse ⟩ click ⟩ example ⟩ draw dots

Every time the document is clicked, it adds a dot.

💈範例

• replit ⟩ draw dots , require ⟩ Node extension

const { log } = console

// ⭐️ import
import { $, $all, elem } from './js/ext/Node_ext.js'; // Node extension
// --------------------------------------------------------------------

const DOT_SIZE = 16;    // in px

// ⭐️ window.onclick -> draw dot
window.onclick = (event) => {
    document.body.appendChild(elem('div', div => {
        // (pageX, pageY): relative to document (top-left corner)
        const {pageX: x,pageY: y} = event;
        div.className = 'dot';
        div.style.left = (x - DOT_SIZE/2) + "px";
        div.style.top = (y - DOT_SIZE/2) + "px";
        log(`(pageX, pageY) = (${x}, ${y})`);
    }));
};

// ⭐️ button.onclock -> clear all dots
$('button').onclick = (e) => {
    $all('.dot').forEach(node => node.remove());
    e.stopPropagation();    // prevent from drawing new dot.
    log(`dots all cleared ...`);
};

🗺️ 圖表

👥 相關

• stop propagation

📗 參考

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

📘 手冊

• Event ⟩ UIEvent ⟩ MouseEvent ⟩

  • click event