Skip to content

Instantly share code, notes, and snippets.

@rniwa

rniwa/disabled-mouse-event.html

Last active March 8, 2022 09:52
Show Gist options
  • Save rniwa/bf0f1411d6b811fcb605e796498740f3 to your computer and use it in GitHub Desktop.
Save rniwa/bf0f1411d6b811fcb605e796498740f3 to your computer and use it in GitHub Desktop.
Download ZIP
Dispatching a mouse event and a non-mouse on a disabled button
Raw
disabled-mouse-event.html
<!DOCTYPE html>
<html>
<body>
<div><button id="button" type="submit" disabled><span>Go</span></button></div>
<pre id="log"></pre>
<script>
function logEventCapturing(event) { document.getElementById('log').textContent += `${event.type} on ${this.localName} capturing path:${event.composedPath().length}\n`; }
function logEventBubbling(event) { document.getElementById('log').textContent += `${event.type} on ${this.localName} bubbling path:${event.composedPath().length}\n`; }
for (const name of ['button', 'div', 'span']) {
const element = document.querySelector(name);
element.addEventListener('click', logEventCapturing, true);
element.addEventListener('test', logEventCapturing, true);
element.addEventListener('click', logEventBubbling);
element.addEventListener('test', logEventBubbling);
}
document.querySelector('span').dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));
document.querySelector('span').dispatchEvent(new Event('test', {bubbles: true, cancelable: true}));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment