macos JQuery - 我可以查询 MacBook Pro 触控板吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4677783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery - Can I query the MacBook Pro Trackpad?
提问by Tomkay
Can I use JQuery to query the Trackpad? So I can do something like this:
我可以使用 JQuery 查询触控板吗？所以我可以做这样的事情：
Pseudo Javascript (JQuery)
伪 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. :)
是否有插件或其他框架可以执行此操作？
感谢您的每一个回应和想法。:)
回答by Gidon
I've looked around a bit on the web, and so far see that both Chrome and Safari do not expose these events in the browser.
我在网络上环顾了一下，到目前为止，Chrome 和 Safari 都没有在浏览器中公开这些事件。
https://superuser.com/questions/27627/three-finger-page-up-page-down-in-safari-chrome
https://superuser.com/questions/27627/three-finger-page-up-page-down-in-safari-chrome
Touch events available in Safari?
Firefox does support something:
Firefox 确实支持一些东西：
https://developer.mozilla.org/En/DOM/Mouse_gesture_events
https://developer.mozilla.org/En/DOM/Mouse_gesture_events
But I don't see a lot of references to this.
但是我没有看到很多对此的引用。
I guess when only one browser supports it, it is a bit useless to use these kind of events.
我想当只有一个浏览器支持它时，使用这些事件有点没用。
回答by hakazvaka
There is a wheelevent which you can use to detect two-finger swipe on Mac.
有一个滚轮事件可用于检测 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.
这可能不适用于某些较旧的浏览器和/或 Mozilla（因为它会为滚轮运动触发一些不同的事件），但只要您将此作为附加/帮助功能实现，此代码就足够了。
回答by Asa Kusuma
You could probably use mouse wheel tracking to get the desired effect: http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
您可能可以使用鼠标滚轮跟踪来获得所需的效果：http: //www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
If you want to use jQuery, this mousewheel plugin should help: http://brandonaaron.net/code/mousewheel/docs
如果你想使用 jQuery，这个鼠标滚轮插件应该有帮助：http: //brandonaaron.net/code/mousewheel/docs
回答by Joel Teply
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.
我们设法确定触控板的使用情况，首先假设 OSX 机器有它，然后努力检测该用户是否插入了鼠标。对不起，因为我们使用打字稿，但它可以在 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.
首先，看看用户代理属性，然后如果是 OSX，假设它有一个。我只是在用户代理上使用一些基本的字符串表达式来确定操作系统是什么。
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.
现在通过监听滚轮事件来消除该设备。触控板设备将创建非常小的非整数 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
}
}, [])
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.
现在使用触控板事件并在通常不支持它的浏览器中检测捏合（例如 HammerJS）：在 OSX Safari 和 iOS Safari 上，触发“gesturestart”和“gesturechange”事件，这足以检测捏合和旋转。您可以使用缩放和旋转参数来获取所需的数据。
Here's some code to get you started:
下面是一些帮助您入门的代码：
https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e
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:
在 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
}
});
回答by zavr
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);
}
