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="checkbox" id="mousedown">Mousedown<br>
<input type="checkbox" id="touchstart">Touchstart<br>
<input type="checkbox" id="document">Document<br>

CSS

body {
  font-size: 48px;   
}
#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 (e.target==d1) {
        if ($('mousedown-pd').checked) {
            e.preventDefault();
        }
        if ($('mousedown-sp').checked) {
            e.stopPropagation();
        }
    }
};


var onchange = function(e) {
    d1.removeEventListener('mousedown', handler, true);    
    d1.removeEventListener('touchstart', handler, true);
    document.removeEventListener('mousedown', handler, true);    
    document.removeEventListener('touchstart', handler, true);
    var tgt = d1;
    if ($('document').checked) {
        tgt = document;
    }
    if( $('mousedown').checked) {
        tgt.addEventListener('mousedown', handler, true);
    }
    if( $('touchstart').checked) {
        tgt.addEventListener('touchstart', handler, true);
    }
};

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