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>

Answers


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.


Touch events work in Chrome version 21 (not sure about previous versions) BUT you have to keep the Developer Tools window open in order for the touch events to occur. If you close the window you will go back to normal mouse events.


One important point that I've noticed - Checking "Emulate touch events" does not disable mouse events, it only adds a touch as well.


Can you share the code you tried? Here's a sample code that worked with me, both on iPhone and Chrome 19

<head>
 <script>
function listen(elem, evnt, func) {
  if (elem.addEventListener)  // W3C DOM5.        
    elem.addEventListener(evnt,func,false);
  else if (elem.attachEvent) { // IE DOM7.         
    var r = elem.attachEvent("on"+evnt, func);
    return r;
  }
}

function attachListeners() {
var touch_div = document.getElementById('touch_me');
listen(touch_div,'touchmove', function(event) {
    touch_div.innerHTML="being touched " + event.targetTouches.length;
    touch_div.style.background =green;
}, false);
listen(touch_div,'touchstart', function(event) {
    event.preventDefault();
    touch_div.innerHTML="touchstart";
    touch_div.style.background ='green';
}, false);
listen(touch_div,'touchend', function(event) {
    touch_div.innerHTML="thanks!";
    touch_div.style.background ='#CCFF66';
}, false);
listen(touch_div,'click', function(event) {
    touch_div.innerHTML="hey - touch, not click!";
    touch_div.style.background ='red';
}, false);
listen(touch_div,'onmouseup', function(event) {
    touch_div.innerHTML="hey - that was a click!";
    touch_div.style.background ='';
}, false);
 }

function run_onload() {
attachListeners();
}   

 </script>

 </head>
 <body onload="run_onload()">
 <div id="touch_me">Touch me!</div>
 </body>

The only thing that is working for me is to toggle Emulate Touch Events found in Emulation > Sensors in Chrome 45 each time the page is reloaded. This is a pretty crappy solution. Hope someone finds a less annoying fix.


As of Chrome 69, there's no Overrides pane in the settings, nor an Emulator drawer in the console. Instead, you can click the ... icon in the device view and then select "Add device type".

While in Responsive mode, this will show you a little dropdown with the options "Mobile", "Mobile (no touch)", "Desktop", and "Desktop (no touch)". If you don't see it, expand the width of the device view pane. The default for Responsive mode is Mobile (which means touch events).

Note that when you select other pre-set devices, the device type will be set to Mobile and can't be changed. You can also select which device type you'd like to emulate when creating a custom device in Settings.


Need Your Help