Chrome的“模拟触摸事件”无法正常工作

Question

Chrome的“模拟触摸事件”无法正常工作

google-chromemobiletouchgoogle-chrome-devtoolstouch-event

10

我已经在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>

- Nathan Friend

我正在运行版本号为19.0.1084.56。 - Nathan Friend

你是否偶然放大或缩小了页面？在Chrome浏览器中，鼠标和触摸事件的坐标会受到页面缩放和布局影响而出现偏移。因此，你可能只是在垂直方向上“错过”了目标div。 - Alexander Pavlov

我检查了我的缩放级别 - 我处于标准缩放级别。我还疯狂地在我的目标周围点击，希望Chrome只是错误地读取了我的坐标，但不幸的是，没有成功。谢谢你的建议。 - Nathan Friend

2

由于某些原因，DOM0事件与触摸模拟不兼容。您可以使用DOM2 addEventListener("ontouchstart",...) 作为解决方法。同时，已经提交了 https://crbug.com/133915。 - Alexander Pavlov

6个回答

4

在Chrome 21版本中，触摸事件可以正常工作（之前的版本未测试）。但是，为了触发触摸事件，需要保持开发者工具窗口处于打开状态。如果关闭该窗口，则会返回普通的鼠标事件。

- Keith

来源是什么？你自己有这方面的经验吗？ - nalply

1

这个功能和其他许多覆盖功能一样，只有在开启 DevTools 时才能使用。 - Volker Rose

3

从Chrome 69开始，在设置中没有“覆盖”面板，控制台中也没有“仿真器”抽屉。相反，您可以在设备视图中单击...图标，然后选择“添加设备类型”。

在响应式模式下，这将显示一个小的下拉菜单，其中包含选项“移动设备”、“移动设备（无触摸）”、“桌面设备”和“桌面设备（无触摸）”。如果您没有看到它，请扩展设备视图窗格的宽度。响应式模式的默认设置是移动设备（这意味着触摸事件）。

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

- Galen Long

2

我注意到一个重要的点——勾选“模拟触摸事件”并不会禁用鼠标事件，它只是增加了触摸事件。

- Ledivin

您是否知道一种方法，可以在模拟触摸事件时禁用鼠标事件？ - TankorSmash

我认为在Chrome中没有简单的方法来做到这一点 - 只能捕获它们并在事件上运行preventBubble、stopPropagation、stopImmediatePropagation...即使如此，我也不能确定是否会首先捕获所有这些事件。 - Ledivin

2

这是因为触摸事件的工作方式如此。它们在点击事件之上添加了额外的层。当启用触摸时禁用点击事件意味着仿真层与实际设备上的工作方式不同，会导致仿真层出现故障。 - Garbee

1

你能分享一下你尝试过的代码吗？这是一个样例代码，我在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>

- Yasei No Umi

谢谢您的评论，但即使在这个例子中，Chrome也将我的点击解释为实际的鼠标点击而不是触摸。 - Nathan Friend

1

我唯一有效的方法是在每次重新加载页面时，在Chrome 45的仿真>传感器中切换模拟触摸事件。这是一个相当糟糕的解决方案。希望有人能找到一个不那么烦人的修复方法。

- Mark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Pollitt · Accepted Answer

让我困惑的是，除了勾选“仿真触摸事件”复选框之外，您还必须勾选主“启用”复选框才能启用覆盖。一旦两者都被勾选，它就可以正常工作。

输入图像描述