如何阻止触摸事件落在移动设备网络浏览器中的覆盖对象上？

Question

单击 SetCore 将向对象添加事件。如果您触摸 core 内部，它将启动计时器并显示触摸的时间长度 coreText。当您触摸黑框 coreObject 时，触摸会落到 core.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TouchTest</title>
<style>
*, html, body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>
<script>

var arrTimers = [];

function Timer(){
    this.t; 
    this.count = 0;

    this.start = function(){
        console.log("starting");
        this.count = 0;
        this.t = setInterval(this.add.bind(this), 50);
    }
    this.add = function(){
        this.count++;
        console.log(this.count);
    }

    this.stop = function(){
        console.log("stopping");
        clearInterval(this.t);
    }
}

function setCore(){
    document.getElementById('coreText').innerHTML = "objects set";

    document.getElementById('core').addEventListener('touchstart', function(ev) {
        if(ev.target.id in arrTimers){
            arrTimers[ev.target.id].stop();
        }else{
            arrTimers[ev.target.id] = new Timer();
        }
        arrTimers[ev.target.id].start();
        document.getElementById('coreText').innerHTML = "touchstart";
        console.log(arrTimers[ev.target.id]);
    }, false);

    document.getElementById('core').addEventListener('touchend', function(ev) {
        var count;
        if(ev.target.id in arrTimers){
            arrTimers[ev.target.id].stop();
            count = arrTimers[ev.target.id].count;
        }
        document.getElementById('coreText').innerHTML = count;
    }, false);

    document.getElementById('coreObject').addEventListener('touchstart', function(ev) {
        document.getElementById('coreText').innerHTML = ev.target.id;
    }, false);
}
</script>
</head>
<body>
<div onclick="setCore()">SetCore</div>
 <div id="core" style="display:block; position:relative; top:50px; left:20px; width:200px; height:200px; border:1px solid #000000;">
    <div id="coreObject" style="display:block; position:absolute; top:90px; left:80px; width:80px; height:30px; border:1px solid #000000; background-color:#000000;"></div>
    <div id="coreText" style="display:block; position:absolute; top:30px; left:15px; width:110px; height:30px; border:1px solid #000000;"></div>
</div> 

</body>
</html>

如何阻止 <div id="coreObject"> 上的触摸事件掉落？

Answer 1

添加 preventDefault() 并将 bubbles 设置为 false。

所以：

document.getElementById('coreObject').addEventListener('touchstart', function(ev) {
    document.getElementById('coreText').innerHTML = ev.target.id;
    ev.preventDefault();
    ev.bubbles = false;
}, false);

那么 document.getElementById('core').addEventListener('touchend'... 将永远不会触发。

如何阻止触摸事件落在移动设备网络浏览器中的覆盖对象上？

How to stop touch event from falling through on overlay object in web browser for mobile device?

html

javascript

touchscreen

mobile-browser