> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/type/mouse/click/draw-dots.md).

# draw dots

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ [mouse](/web/browser/event/type/mouse.md) ⟩ [click](/web/browser/event/type/mouse/click.md) ⟩ example ⟩ draw dots

{% hint style="success" %}
Every time the document is [**clicked**](/web/browser/event/type/mouse/click.md), it adds a dot.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}

* replit ⟩ [draw dots](https://replit.com/@pegasusroe/draw-dots#index.js) ,  require ⟩ [Node extension](/web/browser/dom/type/node/+ext.md)

```javascript
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 ...`);
};
```

{% endtab %}

{% tab title="🗺️ 圖表" %}
{% embed url="<https://replit.com/@pegasusroe/draw-dots#index.js>" %}
{% endtab %}

{% tab title="👥 相關" %}

* [stop propagation](/web/browser/event/propagation/stop.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Mouse Clicks](https://eloquentjavascript.net/15_event.html#i_D5iwImkmyt)
  {% endtab %}

{% tab title="📘 手冊" %}

* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ⟩&#x20;
  * [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
    {% endtab %}
    {% endtabs %}