Question

我在Chrome的开发者工具中启用了“模拟触摸事件”选项。我设置了一个简单的测试程序，当我触摸<div>时会发出警报。该程序在我的Galaxy Nexus上运行正常，但是当我点击Chrome中的<div>时，即使启用了“模拟触摸事件”选项，也没有任何反应。有什么建议？我是否正确使用此工具？

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

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

Answer 1

让我感到困惑的是，除了选中“模拟触摸事件”复选框之外，还必须选中主“启用”复选框以启用覆盖。一旦检查完毕，它就可以正常工作。

enter image description here

Answer 2

触摸事件在Chrome版本21中有效（不确定以前的版本）但是您必须打开“开发人员工具”窗口才能发生触摸事件。如果你关闭窗口，你将回到正常的鼠标事件。

Answer 3

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

Answer 4

你能分享你试过的代码吗？这是一个与我合作的示例代码，包括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>

Answer 5

唯一对我有用的是切换Emulation＆gt;中的Emulate Touch Events。每次重新加载页面时，Chrome 45中的传感器。这是一个非常糟糕的解决方案。希望有人找到一个不那么讨厌的修复。

Answer 6

从Chrome 69开始，设置中没有“替代”窗格，控制台中也没有“模拟器”抽屉。相反，您可以在设备视图中单击...图标，然后选择“添加设备类型”。

在响应模式下，这将向您显示一些下拉菜单，其中包括“移动”，“移动（无触摸）”，“桌面”和“桌面（无触摸）”选项。如果看不到，请扩展设备视图窗格的宽度。响应模式的默认值为“移动”（表示触摸事件）。

请注意，当您选择其他预设设备时，设备类型将设置为“移动”，并且无法更改。您还可以在“设置”中创建自定义设备时选择要模拟的设备类型。

Chrome“模拟触摸事件”无效

6 个答案: