javascript event bubbling and capturing code example
Example 1: how to prevent event capturing in javascript
how to prevent event button click capturing to tag/div/icon
easiest way OPTION 1 with CSS:
button > * {
pointer-events: none;
}
OPTION 2 with javascript:
use e.currentTarget.children ;
OPTION 3 with Javascript:
use e.target.closest('selector') to locate the child, not e.currentTarget;
Example 2: what is event bubbling in javascript with example
<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>
Example 3: what is event bubbling in javascript with example
p {
line-height: 0;
}
div {
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
div:hover {
border: 1px solid #faa;
background: #fdd;
}