CodePen Embed - preventDefault

<form>
  <div id="outer" class="outer">
    <input type="checkbox" id="inner"/>
  </div>
</form>

.outer {
  padding: 16px;
  width: 22px;
  background-color: #333;
}

const outer = document.getElementById('outer')
outer.addEventListener(
  'click', 
  e => alert('outer event'),
  false
)

const inner = document.getElementById('inner')
inner.addEventListener(
  'click', 
  e => { 
    alert('inner event1')
    e.preventDefault()
  },
  false
)
inner.addEventListener(
  'click', 
  e => alert('inner event2'),
  false
)

This Pen is owned by waku-waku on CodePen.

See more by @raku-raku on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.