Menu
Clicking SetCore will add events to objects. If you touch inside core it will start timer and display length of time touched coreText. When you touch on the black box coreObject the touch falls through to 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>
How can I stop the touch event on <div id="coreObject"> from falling through?
695
Add preventDefault() and set bubbles to false.
So:
document.getElementById('coreObject').addEventListener('touchstart', function(ev) {
document.getElementById('coreText').innerHTML = ev.target.id;
ev.preventDefault();
ev.bubbles = false;
}, false);
Then the document.getElementById('core').addEventListener('touchend'... will never fire.
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
