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

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'...永远不会触发。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-05-22 15:33:37

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-05-22 15:33:37

解决方案1
2 已采纳 2015-05-22 15:33:37