javascript - JQuery - 我可以查询 MacBook Pro 触控板吗？

Question

我可以使用 JQuery 来查询触控板吗？所以我可以做这样的事情：

伪 Javascript (JQuery)

$(document).keyInput().trackpadTwoFingersLeft(function() {
  $('#div ul').animate({left: "=+1"},1);
});

是否有插件或其他框架可以做到这一点？
感谢您的每一个回应和想法。:)

Answer 1

我在网上浏览了一下，到目前为止，Chrome 和 Safari 都没有在浏览器中公开这些事件。

https://superuser.com/questions/27627/three-finger-page-up-page-down-in-safari-chrome

Safari 中可用的触摸事件？

Firefox 确实支持一些东西：

https://developer.mozilla.org/En/DOM/Mouse_gesture_events

但我没有看到很多关于这个的参考。

我想当只有一个浏览器支持它时，使用这些事件有点没用。

Answer 2

有一个滚轮事件，您可以使用它来检测 Mac 上的两指滑动。

您的代码可能如下所示：

      $('element').on('wheel', function(e){
        var eo = e.originalEvent;
        if(Math.abs(eo.wheelDeltaY) < 10 && Math.abs(eo.wheelDeltaX) > 2){
          e.preventDefault();

          if(eo.wheelDeltaX < -100 && !scope.item.swipedLeft){
              // swipe left
          }

          if(eo.wheelDeltaX > 100 && scope.item.swipedLeft){
              // swipe right
          }
        }
      });

这可能在某些较旧的浏览器和/或 Mozilla 中不起作用（因为它会为滚轮运动触发一些不同的事件），但只要您将其作为附加/帮助功能实现，此代码就足够了。

Answer 3

您可能可以使用鼠标滚轮跟踪来获得所需的效果：http ://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel

如果你想使用 jQuery，这个鼠标滚轮插件应该会有所帮助：http ://brandonaaron.net/code/mousewheel/docs

Answer 4

这里有一些信息，但我无法测试它

function setupForceClickBehavior(someElement)
{
  // Attach event listeners in preparation for responding to force clicks
  someElement.addEventListener("webkitmouseforcewillbegin", prepareForForceClick, false);
  someElement.addEventListener("webkitmouseforcedown", enterForceClick, false);
  someElement.addEventListener("webkitmouseforceup", endForceClick, false);
  someElement.addEventListener("webkitmouseforcechanged", forceChanged, false);
}

https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html#//apple_ref/doc/uid/TP40016162-SW6

Answer 5

我们首先假设 OSX 机器有触控板，然后努力检测该用户是否插入了鼠标，从而设法确定触控板的使用情况。对不起，因为我们使用 typescript，但它可以在 javascript 中工作。

首先，只需查看用户代理属性，然后如果是 OSX，则假设它有一个。我只是在用户代理上使用一些基本的字符串表达式来确定操作系统是什么。

 if (!props.isMobile && props.operatingSystem === OSType.Darwin) {
        props.hasTouchpad = true
        props.hasGestureSupport = props.browser === BrowserType.Safari | props.isMobile
 }

现在通过侦听车轮事件来消除该设备。触控板设备将创建非常小的非整数 deltaY 值。我已经尝试过了，它做得很好。

    const detectMouseType = useCallback((e:WheelEvent) => {

        if (e.ctrlKey || !browserProperties.hasTouchpad) {
            //Didn't detect originally, or pinch zoom OSX and surface, ignore
            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")
            //detected a mouse not a touchpad, maybe a mouse plugged into a mac
            document.removeEventListener('wheel', detectMouseType);

            props.hasTouchpad = false
            props.hasGestureSupport = false
        }
    }, [])

现在开始使用触控板事件并检测通常不支持它的浏览器中的捏合（例如 HammerJS）：在 OSX Safari 和 iOS Safari 上，触发“gesturestart”和“gesturechange”事件，足以检测到捏合和旋转。您可以使用缩放和旋转参数来获取所需的数据。

这里有一些代码可以帮助您入门：

https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e

在 OSX Chrome 上，您可以使用“wheel”事件来检测捏合、滚动和两指点击。您将看到的大多数解决方案都不支持 OSX Chrome 上的捏合或两个手指轻敲，但这会。以下是 Chrome 和所有其他浏览器上的鼠标的两指轻按和捏合操作：

let scale = 1.0;
let posX = 0.0;
let posY = 0.0;

element.addEventListener('wheel', (e) => {
     e.preventDefault();
     if (e.ctrlKey) {
          //using two fingers
          if (e.deltaY === 0 && e.deltaX === 0) {
             console.log("Chrome two finger tap detected")
          } else {
             console.log("pinch zoom")
             scale = scale - e.deltaY * 0.01
          }
     } else {
          console.log('scrolling')
          posX = posX - e.deltaX * 2
          posY = posY - e.deltaY * 2
     }
});