30

有什么方法可以检测客户端使用的是触摸板还是带有 Javascript 的鼠标？

或者至少对使用触摸板而不是鼠标的用户数量进行合理估计？

4

8 回答 8

20

这个话题可能已经解决了，但答案是没有办法检测到它。好吧，我需要找到解决方案，这非常重要。所以我为这个问题找到了一个可以接受的解决方案：

var scrolling = false;
var oldTime = 0;
var newTime = 0;
var isTouchPad;
var eventCount = 0;
var eventCountStart;

var mouseHandle = function (evt) {
    var isTouchPadDefined = isTouchPad || typeof isTouchPad !== "undefined";
    console.log(isTouchPadDefined);
    if (!isTouchPadDefined) {
        if (eventCount === 0) {
            eventCountStart = new Date().getTime();
        }

        eventCount++;

        if (new Date().getTime() - eventCountStart > 100) {
                if (eventCount > 10) {
                    isTouchPad = true;
                } else {
                    isTouchPad = false;
                }
            isTouchPadDefined = true;
        }
    }

    if (isTouchPadDefined) {
        // here you can do what you want
        // i just wanted the direction, for swiping, so i have to prevent
        // the multiple event calls to trigger multiple unwanted actions (trackpad)
        if (!evt) evt = event;
        var direction = (evt.detail<0 || evt.wheelDelta>0) ? 1 : -1;

        if (isTouchPad) {
            newTime = new Date().getTime();

            if (!scrolling && newTime-oldTime > 550 ) {
                scrolling = true;
                if (direction < 0) {
                    // swipe down
                } else {
                    // swipe up
                }
                setTimeout(function() {oldTime = new Date().getTime();scrolling = false}, 500);
            }
        } else {
            if (direction < 0) {
                // swipe down
            } else {
                // swipe up
            }
        }
    }
}

并注册事件：

document.addEventListener("mousewheel", mouseHandle, false);
document.addEventListener("DOMMouseScroll", mouseHandle, false);

它可能需要一些优化并且可能不够完美，但它确实有效！至少它可以检测到macbook触控板。但是由于设计的原因，我想说它应该可以在垫引入大量事件调用的任何地方工作。

下面是它的工作原理：

当用户第一次滚动时，它会检测并检查在 50 毫秒内触发的事件不超过 5 个，这对于普通鼠标来说是非常不寻常的，但对于触控板来说则不然。

然后是 else 部分，这不是为了检测的重要性，而是当用户滑动时调用一次函数的技巧。如果我不够清楚，请来找我，让这个工作非常棘手，当然这不是一个理想的解决方法。

编辑：我现在尽可能地优化了代码。它第二次检测到鼠标滚动并立即在触控板上滑动。还删除了很多重复和不必要的代码。

编辑 2我将时间检查的数字和调用的事件数分别从 50 更改为 100 和从 5 更改为 10。这应该产生更准确的检测。

于 2015-07-02T17:44:46.507 回答
19

比较 e.wheelDeltaY 和 e.deltaY（或 Firefox 中的 e.deltaMode）来检测触摸板鼠标设备

function handler(e) {
    var isTouchPad = e.wheelDeltaY ? e.wheelDeltaY === -3 * e.deltaY : e.deltaMode === 0
    // your code
    document.body.textContent = isTouchPad ? "isTouchPad" : "isMouse"
}
document.addEventListener("mousewheel", handler, false);
document.addEventListener("DOMMouseScroll", handler, false);

于 2019-07-09T08:06:45.230 回答
12

Lauri 上面的答案似乎有效，但我花了一段时间才明白它为什么有效。所以在这里我将提供一个更易于阅读的版本，以及一个概念性的解释。首先，以人类可读的方式写出相同的代码：

function detectTrackPad(e) {
  var isTrackpad = false;
  if (e.wheelDeltaY) {
    if (e.wheelDeltaY === (e.deltaY * -3)) {
      isTrackpad = true;
    }
  }
  else if (e.deltaMode === 0) {
    isTrackpad = true;
  }
  console.log(isTrackpad ? "Trackpad detected" : "Mousewheel detected");
}

document.addEventListener("mousewheel", detectTrackPad, false);
document.addEventListener("DOMMouseScroll", detectTrackPad, false);

这是因为 wheelDeltaY 测量实际硬件鼠标滚轮已经行进的物理距离，而 deltaY 测量屏幕上产生的滚动量。传统鼠标的“滚动分辨率”通常比触控板低得多。也就是说，使用触控板，您可以做出微小的动作并在屏幕上进行微小的滚动。传统的鼠标在更粗的、低分辨率的点击中滚动。要完成鼠标滚轮的完整旋转，可能需要单击 10 次。没有半点击或四分之一点击之类的东西。

对于传统鼠标，单次滚轮单击报告为 120 个 wheelDeltaY“单位”，并导致大约 100像素的滚动。物理 wheelDeltaY 单位是一个完全任意的数字，它不是测量英寸或度数或类似的东西。选择120这个数字只是因为它有很多有用的因素。屏幕上的滚动量由 deltaY 表示，它因浏览器而异。（旁注，deltaY 通常以“线”而不是像素来衡量，尽管它很复杂，请参阅上一个链接）。

鼠标剖面图

与触控板交互有两种不同的方式。首先，您可以获得比 120 小得多的 wheelDeltaY 值，因为可以检测到非常细微的手指手势。其次，wheelDeltaY 正好是 deltaY 值的 3 倍（至少在我设法测试的每个浏览器中）。因此，例如，如果您做出相当于 12 个单击单位的物理手指手势，通常会导致 4 个像素的滚动。Lauri 的代码使用第二个属性 (Y1 = Y2 * 3) 来检测触控板的存在，但您也可以通过检查 abs(wheelDeltaY) 是否等于 120 来成功

我没有对此进行测试，但我认为它也可以工作：

function detectTrackPad(e) {
  var isTrackpad = false;
  if (e.wheelDeltaY) {
    if (Math.abs(e.wheelDeltaY) !== 120) {
      isTrackpad = true;
    }
  }
  else if (e.deltaMode === 0) {
    isTrackpad = true;
  }
  console.log(isTrackpad ? "Trackpad detected" : "Mousewheel detected");
}

document.addEventListener("mousewheel", detectTrackPad, false);
document.addEventListener("DOMMouseScroll", detectTrackPad, false);
于 2020-06-16T19:00:54.830 回答
5

您可以检测到 JS 事件。

touchstart除了鼠标事件之外，触摸设备还会触发触摸事件。

非触摸设备只会触发鼠标事件。

于 2012-05-24T20:17:56.473 回答
5

在一般情况下，没有办法做你想做的事。ActiveX可能允许您查看和检查 USB 设备，但在最好的情况下，即使这是可能的，也将您限制为 IE 用户。除此之外，没有办法知道。

您可能能够辨别触摸板用户移动光标的方式（或频率）与鼠标用户移动光标的方式。以这种方式区分物理输入设备是一个非常困难的前景，并且可能完全不可能，因此我将其包含在此处只是为了完整起见。

于 2012-05-25T04:46:53.000 回答
4

触摸板触发的滚轮事件会产生更小的 event.deltaY,1 或 2，但鼠标滚轮触发会产生 100,200。

于 2019-02-25T08:01:05.060 回答
0

从测试插入鼠标到带有触摸板的 Mac 和带有触摸板的 Windows 机器，我可以总结一下我是如何做到这一点的。

  1. 检测导航器用户代理是否包含“Mobile”或“Mac OS”如果其中任何一个为真，则可能是基于触摸的系统，但要努力消除这种情况。将布尔 hasTouchPad 设置为 true

  2. 如果上述情况属实，则检测“鼠标”事件并运行测试，如高数、非整数频率或卡尔曼滤波。

  3. 将这些保留在队列中，如果该队列的总和超过阈值，则禁用 hasTouchpad 变量并断开事件。

let isMouseCounts: Array<number> = []

if (Client.hasTouchpad) {
    document.addEventListener('wheel', detectMouseType);
}

function detectMouseType(e:WheelEvent) {
    if (!Client.hasTouchpad) return

    let isMouse = e.deltaX === 0 && !Number.isInteger(e.deltaY)

    isMouseCounts.push(isMouse ? 1 : 0)
    if (isMouseCounts.length > 5) isMouseCounts.shift()

    let sum = isMouseCounts.reduce(function(a, b) { return a + b; });

    if (sum > 3 && e.type === "wheel") {
        console.log("Touchpad disabled")
        document.removeEventListener('wheel', detectMouseType);
        Client.hasTouchpad = false;
    }
}
于 2019-09-04T03:23:52.413 回答
-2

您可以检查安装到本地软件包中的设备驱动程序软件是否正常运行。就像在 windows synaptics、elan 硬件中一样，对于 UNIX（Linux），您可以只检查在基本安装过程中安装的软件包。许多包在不同版本的 Linux 和类似 Linux 的系统中以不同的格式出现（完全不是 linux），但它们使用相同的包名称。刚知道拉它的代码。仍在努力。

于 2017-07-28T17:53:45.297 回答