Geek Answers Handbook

Chrome "Emulate Touch Events" not working

I have enabled the "Emulate Touch Events" option in Chrome Developer Tools. I installed a simple test program that warns when I touch the <div> . The program works fine on my Galaxy Nexus, but when I click on the <div> in Chrome, even if the "Emulate Touch Events" option is turned on, nothing happens. Any suggestions? Am I using this tool correctly?

Here is my code - nothing out of the ordinary.

 <!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>
+7
source share
5 answers

What alerted me was that in addition to checking the “Sensory event emulation” checkbox, you should also check the “Enable” checkbox to enable overrides. After both were checked, it worked fine.

enter image description here

+11
source

Work with Touch events in Chrome version 21 (not sure about previous versions). But you must open the developer tool window for touch events to occur. If you close the window, you will return to normal mouse events.

+3
source

One important point that I noticed is that the “Touch event emulation” check does not disable mouse events, it only adds touch.

+2
source

Can you share the code you tried? Here is an example of code that worked with me on both 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>
+1
source

The only thing that works for me is to switch Emulate Touch Events to Emulation> Sensors in Chrome 45 every time the page reloads. This is a pretty crappy solution. Hope someone finds a less annoying solution.

enter image description here

0
source

More articles:


All Articles