Question

关于如何在Windows上使用Firefox启用触摸事件已经存在一些问题，但我所能找到的基本上归结为“转到about：config并将dom.w3c_touch_events.enabled设置为1（或2）”。

但是使用当前的Firefox 46（在我看来这种行为始于版本39），dom.w3c_touch_events.enabled似乎没有任何影响。

caniuse.com提到可以启用，a page on developer.mozilla.org提及相同的内容。

我错过了什么？如何启用触摸事件？

详细信息：

我试过Windows 8.1和10.我看到IE的预期行为（没有触摸，但是指针事件），Edge（打开它们后的触摸和指针事件）和Vivaldi（触摸事件，没有尝试其他Chromium浏览器。）

使用下面的测试页面，我在Firefox 46中看到以下行为：

没有任何触碰事件。
使用触摸屏（和手指），仅在移动手指时单击和指针事件。（当然，在将dom.w3c_pointer_events.enabled设置为true之后指针事件。）除其他外，这使按下按钮变得不可靠。
始终可以通过收缩进行缩放。
dom.w3c_pointer_events.enabled和layers.async-pan-zoom.enabled对触摸事件没有影响。

其他测试页（例如PEP测试页，https://jquery.github.io/PEP/）显示相同的行为。我错过了什么？

测试页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <style type="text/css" tag="DisallowSelect">
    * {
      -webkit-touch-callout: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      -ms-touch-action: none;
      touch-action: none;
    }
  </style>
  <title>Touch-Test</title>
  <script type="text/javascript">
    function Init() {
      window.oncontextmenu = function () { return false; };

      document.getElementById('mouseBox').addEventListener('mousedown', mouseBoxDown, false);
      document.getElementById('mouseBox').addEventListener('mouseup', mouseBoxUp, false);
      document.getElementById('mouseBox').addEventListener('mouseleave', mouseBoxUp, false);

      document.getElementById('touchBox').addEventListener('touchstart', touchBoxDown, false);
      document.getElementById('touchBox').addEventListener('touchend', touchBoxUp, false);
      document.getElementById('touchBox').addEventListener('touchcancel', touchBoxUp, false);

      document.getElementById('pointerBox').addEventListener('pointerdown', pointerBoxDown, false);
      document.getElementById('pointerBox').addEventListener('pointerup', pointerBoxUp, false);
      document.getElementById('pointerBox').addEventListener('pointercancel', pointerBoxUp, false);
      document.getElementById('pointerBox').addEventListener('pointerleave', pointerBoxUp, false);
      document.getElementById('pointerBox').addEventListener('pointerout', pointerBoxUp, false);
    }

    function mouseBoxDown(evt) {
      document.getElementById('mouseBox').style.backgroundColor = '#d00000';
    }

    function mouseBoxUp(evt) {
      document.getElementById('mouseBox').style.backgroundColor = '#eee';
    }

    function touchBoxDown(evt) {
      evt.preventDefault();
      document.getElementById('touchBox').style.backgroundColor = '#00d000';
    }

    function touchBoxUp(evt) {
      evt.preventDefault();
      document.getElementById('touchBox').style.backgroundColor = '#eee';
    }

    function pointerBoxDown(evt) {
      evt.preventDefault();
      document.getElementById('pointerBox').style.backgroundColor = '#0000d0';
    }

    function pointerBoxUp(evt) {
      evt.preventDefault();
      document.getElementById('pointerBox').style.backgroundColor = '#eee';
    }

  </script>
</head>
<body onload="Init()">
  <div style="width: 100px; height: 100px; background-color: #eee" id="mouseBox"></div>
  <div style="width: 100px; height: 100px; top: 120px; position: absolute; background-color: #eee" id="touchBox"></div>
  <div style="width: 100px; height: 100px; top: 240px; position: absolute; background-color: #eee" id="pointerBox"></div>
</body>
</html>

如何在带触摸屏的Windows上为Firefox＆gt; = 39启用触摸事件

0 个答案: