CODEWITHSUNDEEP
javascripthtmltouchscreenmobile-browser
K3NN3TH
K3NN3TH

Reputation: 1496

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

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?

Upvotes: 4

Views: 2143

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

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.

Upvotes: 2

Related Questions