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

发布于 2024-10-12 09:18:35 字数 253 浏览 2 评论 0原文

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

Pseudo Javascript (JQuery)

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

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

原文

Can I use JQuery to query the Trackpad?
So I can do something like this:

Pseudo Javascript (JQuery)

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

Is there a plugIn or another framework where I can do this?

Thank you for every response and idea. :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薄凉少年不暖心 2024-10-19 09:18:35

我在网上浏览了一下，到目前为止发现 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

但我没有看到很多对此的引用。

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

回复收藏 0 原文

秋日私语 2024-10-19 09:18:35

有一个 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 中工作（因为它会为滚轮运动触发一些不同的事件），但只要您将其实现为附加/辅助功能，此代码应该足够了。

There is a wheel event which you can use to detect two-finger swipe on Mac.

Your code could look something like this:

      $('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
          }
        }
      });

This could possibly not work in some older browser and/or Mozilla (as it fires some different event for the wheel movement), but as long as you implement this as an additional/helper feature, this code should suffice.

回复收藏 0 原文

草莓味的萝莉 2024-10-19 09:18:35

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

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

回复收藏 0 原文

顾挽 2024-10-19 09:18:35

我们首先假设 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 上，您可以使用“滚轮”事件来检测捏合、滚动和两根手指点击。您将看到的大多数解决方案都不支持 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
     }
});

We manage to determine trackpad usage by first assuming an OSX machine has it and then working to detect if that user has a mouse plugged in. Excuse me, because we use typescript, but it will work in javascript.

First, just look at the user agent properties, and then if OSX, assume it has one. I just use some basic string expressions on the user agent to determine what the OS is.

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

Now work to eliminate that device by listening to the wheel event. A trackpad device will create really small deltaY values that are non-integer. I have tried this and it does a very good job.

    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
        }
    }, [])

Now onto using trackpad events and detecting pinch in browsers that normally don't support it (HammerJS for example):
On OSX Safari and iOS Safari the "gesturestart" and "gesturechange" events are fired which are sufficient for detecting pinch and rotate. There are scale and rotate parameters you can use to get the data you need.

Here's some code to get you started:

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

On OSX Chrome, you can use the "wheel" event to detect pinch, scroll, and two finger tap. Most solutions you'll see will not support pinch or two finiger tap on OSX Chrome, but this will. Here's how two finger tap and pinch are done for Chrome and also mice on all other browsers:

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
     }
});

回复收藏 0 原文

怪我鬧 2024-10-19 09:18:35

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

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

There's some info here but I wasn't able to test it

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

回复收藏 0 原文

~没有更多了~