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

Question

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?

score 2 · Accepted Answer · answered May 22 '15 at 15:33

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.

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

1 Answers1