gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:30:49 24 4
gpt4 key购买 nike

单击 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"> 上的触摸事件?从跌倒?

最佳答案

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

关于javascript - 如何阻止触摸事件落在移动设备网络浏览器中的覆盖对象上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30400559/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com