JSFiddle - React, Tailwind, and code Playground

by rbyers

HTML

<div id='d1'>
    Outer
    <div id='d2'>
        Inner
    </div>
</div>
<span id='status'>None</span><br>
<input type="radio" name="mode" id="default" checked>Default<br>
<input type="radio" name="mode" id="mousedown">Mousedown<br>
<input type="radio" name="mode" id="mousedown-pd">Mousedown-PD<br>

CSS

#d1 {
    position: relative;
    background: #77F;
    width: 100%;
    height: 100px;
}
#d2 {
    position: absolute;
    background: #7F7;
    left: 50%;
    right: 0;
    height: 90px;
    top: 5px;
}

JavaScript

var d1=$('d1');
var counter = 0;

var handler = function(e) {
    counter++;
    $('status').textContent = counter;
    if ($('mousedown-pd') && e.target==d1) {
        e.preventDefault();
    }
};

var onchange = function(e) {
    d1.removeEventListener('mousedown', handler, true);    
    if( !$('default').checked) {
        $('status').textContent = 'added handler';
        d1.addEventListener('mousedown', handler, true);
    }
};

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].onchange = onchange;
}