click:cell
Dispatched when a cell is clicked, with the position of the cell in the event detail.
Syntax
- doodle.addEventListener('click:cell', handler)
- detail.x, detail.y, detail.z
- Column, row and depth of the cell, from 1.
- detail.element
- The cell element inside the shadow DOM.
- detail.originalEvent
- The click event.
The event bubbles, so one listener on an ancestor can serve many doodles.
It fires independently of click:update.
Examples
const doodle = document.querySelector('css-doodle');
doodle.addEventListener('click:cell', (e) => {
const { x, y, element } = e.detail;
console.log(`cell at column ${x}, row ${y}`);
element.style.background = '#e6437d';
});