Skip to content

Instantly share code, notes, and snippets.

@rniwa

rniwa/form-stop-propagation.html

Created September 6, 2018 07:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rniwa/909d60c290ba54b65a472a2cba20dfac to your computer and use it in GitHub Desktop.
Save rniwa/909d60c290ba54b65a472a2cba20dfac to your computer and use it in GitHub Desktop.
Download ZIP
Stopping of submit event at a form element
Raw
form-stop-propagation.html
<!DOCTYPE html>
<html>
<body>
<form id="outer-form" action="javascript:doAction(outerForm)">
</form>
<form id="inner-form" method="GET" action="javascript:doAction(innerForm)">
<div id="buttonParent">
<input>
<button id="submitButton" type="submit">Go</button>
</div>
</form>
<pre id="log"></pre>
<script>
function doAction(element) {
document.getElementById('log').textContent += `${element.id}: action!\n`;
}
function logEventCapturing(event) {
document.getElementById('log').textContent += `${this.id}: ${event.target.id}, capturing, pathLength: ${event.composedPath().length}\n`;
}
function logEventBubbling(event) {
document.getElementById('log').textContent += `${this.id}: ${event.target.id}, bubbling, pathLength: ${event.composedPath().length}\n`;
}
const outerForm = document.getElementById('outer-form');
const innerForm = document.getElementById('inner-form');
outerForm.appendChild(innerForm);
for (const element of [outerForm, innerForm, document.querySelector('div')]) {
element.addEventListener('submit', logEventCapturing, true);
element.addEventListener('test', logEventCapturing, true);
element.addEventListener('submit', logEventBubbling);
element.addEventListener('test', logEventBubbling);
}
innerForm.querySelector('button').dispatchEvent(new CustomEvent('submit', {bubbles: true, cancelable: true}));
//document.querySelector('button').click();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment