- From: Jake Archibald <notifications@github.com>
- Date: Thu, 31 Oct 2024 03:44:06 -0700
- To: whatwg/dom <dom@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <whatwg/dom/issues/1320@github.com>
### What problem are you trying to solve?
```js
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
// …
});
```
I want to add activation behavior to the above button, such as checking a custom checkbox.
### What solutions exist today?
```js
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
if (event.defaultPrevented) return;
checkCustomCheckbox();
});
```
This isn't great because the default may be prevented by a listener further along the path.
```js
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
setTimeout(() => {
if (event.defaultPrevented) return;
checkCustomCheckbox();
}, 0);
});
```
This isn't great because the effect may happen a frame later (`rAF` isn't a reliable solution here due to https://github.com/whatwg/html/issues/10113). It's also observably async:
```js
button.click();
console.log(customCheckboxChecked); // expected true, but got false
```
### How would you solve it?
Something like:
```js
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
event.addActivationCallback(() => {
checkCustomCheckbox();
});
});
```
### Anything else?
_No response_
--
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/1320
You are receiving this because you are subscribed to this thread.
Message ID: <whatwg/dom/issues/1320@github.com>
Received on Thursday, 31 October 2024 10:44:10 UTC