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

6 回答 6

13

让我难过的是，除了选中“模拟触摸事件”复选框外，您还必须选中主“启用”复选框以启用覆盖。两者都检查后，它工作正常。

在此处输入图像描述

于 2013-10-02T05:11:13.220 回答
4

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

于 2012-08-22T13:17:42.677 回答
3

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

点击

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

在设备类型下拉列表中选择要模拟的事件

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

添加自定义设备时选择设备类型

于 2018-09-11T14:20:20.647 回答
2

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

于 2012-09-18T13:49:08.477 回答
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>
于 2012-06-19T12:56:56.783 回答
1

唯一对我有用的是每次重新加载页面时切换在 Chrome 45 中的 Emulation > Sensors 中找到的 Emulate Touch Events。这是一个非常糟糕的解决方案。希望有人找到一个不那么烦人的解决方法。

在此处输入图像描述

于 2015-09-04T19:28:49.487 回答