Chrome "Emulate Touch Events" not working

Question

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>

Do you by chance have the page zoomed in/out? Event coordinates (both for the mouse and, consequently, touch ones) in Chrome are known to be off by an amount depending on the zoom and page layout. Consequently, you may be just "missing" the target div vertically. — Alexander Pavlov, Jun 19 '12 at 15:08
I checked my zoom levels - I'm at standard zoom. I also furiously clicked all around my target in hopes that Chrome is just reading my coordinates incorrectly, but alas, to no avail. Thanks for the suggestion. — Nathan Friend, Jun 21 '12 at 01:45
For some reason, DOM0 events do not work with the touch emulation. You can use the DOM2 `addEventListener("ontouchstart",...)` as a workaround. Meanwhile, https://crbug.com/133915 has been filed. — Alexander Pavlov, Jun 21 '12 at 11:58

score 13 · Accepted Answer · answered Oct 02 '13 at 05:11

13

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

answered Oct 02 '13 at 05:11

Mike Pollitt

1,817
16
13

This enable checkbox has to be quite new. I have used this before and not seen it. – aslakjo Oct 10 '13 at 10:52
I think it appeared with Chrome 30. – Prinzhorn Oct 11 '13 at 12:18
I found an updated solution described in my answer below. – Mark Sep 04 '15 at 19:29

score 4 · Answer 2 · answered Aug 22 '12 at 13:17

4

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.

answered Aug 22 '12 at 13:17

Keith

41
2

Source? Did you experience this yourself? – nalply Oct 06 '12 at 20:21
1

"This feature, like many other overrides, will only work while the DevTools are open." Source: https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events – Volker Rose Jun 26 '13 at 10:16

score 3 · Answer 3 · answered Sep 11 '18 at 14:20

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.

score 2 · Answer 4 · answered Sep 18 '12 at 13:49

2

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

answered Sep 18 '12 at 13:49

Ledivin

637
5
18

Do you know of a way to disable the mouse events, while emulating touch events. – TankorSmash Apr 29 '13 at 20:47
I don't think there's a simple way of doing it in Chrome - only catching them and running a preventBubble, stopPropagation, stopImmediatePropagation on the event... though even that I'm not positive would catch all of them first. – Ledivin May 07 '13 at 13:49
2

This is because this is how touch events work. They add extra layers on top of click events. Disabling click events when touch is enabled would mean that the emulation layer would be broken compared to how things would work on actual devices. – Garbee Sep 06 '15 at 12:49

score 1 · Answer 5 · answered Jun 19 '12 at 12:56

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>

Thanks for the comment, but even in this example, Chrome interprets my clicks as actual mouse clicks and not as touches. — Nathan Friend, Jun 21 '12 at 01:43

Mark · Answer 6 · 2015-09-05T23:36:28.270

1

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.

edited Sep 05 '15 at 23:36

answered Sep 04 '15 at 19:28

Mark

2,666
3
25
29

Chrome "Emulate Touch Events" not working

6 Answers6