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

Touch events available in Safari?

Firefox确实支持：

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

但我没有看到很多关于此的内容。

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

Answer 2

您可以使用wheel事件检测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，这个mousewheel插件应该有帮助：http://brandonaaron.net/code/mousewheel/docs

Answer 4

我们首先通过确定一台OSX机器是否装有触控板，然后尝试检测该用户是否插入了鼠标来确定触控板的使用情况。对不起，因为我们使用的是打字稿，但可以在javascript中使用。

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

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

现在，通过监听wheel事件来消除该设备。触控板设备会创建非常小的非整数增量值。我已经尝试过了，它做得很好。

    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上，您可以使用“滚轮”事件来检测捏，滚动和两指点击。您将看到的大多数解决方案在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
     }
});

Answer 5

这里有一些信息，但我无法对其进行测试

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

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

5 个答案: