Search code examples
google-chromemobiletouchgoogle-chrome-devtoolstouch-event

Chrome "Emulate Touch Events" not working

I've enabled the "Emulate Touch Events" option in Chrome's Developer Tools. I set up a simple test program that alerts when I touch a <div>. The program works fine on my Galaxy Nexus, but when I click on the <div> in Chrome, even with the "Emulate Touch Events" option enabled, nothing happens. Any suggestions? Am I using this tool correctly?

Here's my code - nothing too fancy.

<!DOCTYPE html>
<html lang="en">
<head>      
    <style type="text/css">
        #main_div
        {
            position: absolute;
            width: 50px;
            height: 20px;
            background-color: red;
            top: 50%;
            left: 20px;             
        }           
    </style>
    <script type="text/javascript">
        function init()
        {
            main_div = document.getElementById("main_div");             
            main_div.ontouchstart = function() 
            {                    
                 alert("here");
            }                               
        }
    </script>
</head>
<body onload="init()">
    <div>
        <p id="x">hello</p>
        <p id="y"></p>
    </div>
    <div id="main_div">
        hello
    </div>
</body>
</html>
Solution

  • What stumped me was that in addition to having the "Emulate touch events" checkbox checked, you also have to have the master "Enable" checkbox checked to enable overrides. Once both were checked, it worked fine.

    enter image description here