JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<div id="div1">
</div>

<div id="div2">
</div>

CSS

div {
    position: absolute;
    width: 400px;
    height: 400px;
}

#div1 {
    background-color: red;
    display: block;
}

#div2 {
    background-color: blue;
    display:none;
}

JavaScript

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');


// touchstart(touchend) - clickの組み合わせだと
// div2のclickイベントのハンドラが呼ばれる
// touchstart(touchend) - touchstart(touchend)か
// click - clickだとうまく動く

div1.addEventListener('touchstart', function(e) {    
    div1.style.display = 'none';
    div2.style.display = 'block';
    
    // 変更点
    e.preventDefault();
    
    // こっちはダメ
    //e.stopPropagation();
});

div2.addEventListener('click', function() {
    div2.style.display = 'none';    
});