Chrome“仿真触摸事件”不起作用

我已在Chrome开发人员工具中启用了“仿真触摸事件”选项。我建立了一个简单的测试程序，当我触摸<div>时发出警报。该程序在我的Galaxy Nexus上运行良好，但是当我在Chrome中单击<div>时，即使启用了“仿真触摸事件”选项，也没有任何反应。有什么建议么？我是否正确使用此工具？Chrome“仿真触摸事件”不起作用

这是我的代码 - 没什么太花哨。

<!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>

来源

2012-06-14 Nathan Friend

我运行的版本是19.0.1084.56。 –

您偶然会将页面放大/缩小吗？据了解，Chrome浏览器中的事件坐标（包括鼠标以及触摸的坐标）都取决于缩放和页面布局。因此，你可能只是垂直“丢失”目标div。 –

我检查了我的缩放级别 - 我在标准缩放。我也疯狂地点击了我的目标，希望Chrome浏览器正确读取我的坐标，但唉，无济于事。感谢您的建议。 –

什么让我难过的是，除了选中“Emulate touch events”复选框，您还必须选中主“Enable”复选框以启用覆盖。一旦两者都被检查，它运行良好。

enter image description here

来源

2013-10-02 05:11:13

此启用复选框必须是相当新的。我之前使用过这个，并没有看到它。 – aslakjo

我认为它与Chrome 30一起出现。 – Prinzhorn

太好了。它适用于Windows XP上的Chrome 30.0.1599.101。 –

你能分享你试过的代码吗？这里是与我一起工作的样本代码，无论是在iPhone和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>

来源

2012-06-19 12:56:56

感谢您的评论，但即使在此示例中，Chrome也会将我的点击视为实际的鼠标点击，而不是触摸。 –

触摸事件在Chrome版本21（不知道以前的版本）的工作，但你必须保持开发人员工具窗口打开，以便触摸事件发生。如果你关闭窗口，你将回到正常的鼠标事件。

来源

2012-08-22 13:17:42 Keith

来源？你自己亲身体验过吗？ – nalply

这似乎对我的工作方式相同 –

“此功能与许多其他覆盖项一样，仅在DevTools处于打开状态时才有效。” 来源：https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events –

我注意到的一个重点 - 检查“仿真触摸事件”不会禁用鼠标事件，它只会增加一个触摸。

来源

2012-09-18 13:49:08 Ledivin

您是否知道在模拟触摸事件时禁用鼠标事件的方法。 – TankorSmash

我不认为在Chrome中有一种简单的方法 - 只捕捉它们并在事件上运行preventBubble，stopPropagation，stopImmediatePropagation ...虽然即使我不积极，也会首先捕获它们。 – Ledivin

这是因为这是触摸事件的工作原理。他们在点击事件之上添加额外的图层。启用触摸时禁用点击事件意味着与真实设备上的工作方式相比，仿真层将被破坏。 – Garbee

是为我工作的唯一一件事就是在切换仿真>传感器，每个传感器重新加载页面时发现在Chrome 45模拟触摸事件。这是一个非常糟糕的解决方案。希望有人发现一个不那么恼人的修复。

来源

2015-09-04 19:28:49 mark

Chrome“仿真触摸事件”不起作用

回答

相关问题