Javascript 我可以查询MacBookPro触摸板吗?
我可以使用JQuery查询轨迹板吗? 所以我可以这样做:Javascript 我可以查询MacBookPro触摸板吗?,javascript,jquery,macos,function,trackpad,Javascript,Jquery,Macos,Function,Trackpad,我可以使用JQuery查询轨迹板吗? 所以我可以这样做: $('element').on('wheel', function(e){ var eo = e.originalEvent; if(Math.abs(eo.wheelDeltaY) < 10 && Math.abs(eo.wheelDeltaX) > 2){ e.preventDefault(); if(eo.wheelDe
$('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
}
}
});
伪Javascript(JQuery)
是否有插件或其他框架,我可以做到这一点?
感谢您的每一个回复和想法。:) 我在网络上查看了一下,到目前为止,Chrome和Safari都没有在浏览器中公开这些事件 Firefox确实支持以下功能: 但我没有看到太多关于这方面的参考文献
我想当只有一个浏览器支持它时,使用此类事件有点无用。您可能可以使用鼠标滚轮跟踪来获得所需的效果: 如果你想使用jQuery,这个鼠标滚轮插件应该会有帮助:有一个事件,你可以用来检测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
}
}
});
$('element')。在('wheel',函数(e)上{
var eo=原始事件;
如果(数学abs(eo车轮三角座)<10和数学abs(eo车轮三角座)>2){
e、 预防默认值();
如果(eo.wheelDeltaX<-100&!范围项目开关左){
//左击
}
如果(eo.wheelDeltaX>100和&scope.item.swipedLeft){
//向右滑动
}
}
});
这在一些旧的浏览器和/或Mozilla中可能不起作用(因为它会为轮子移动触发一些不同的事件),但只要您将其作为一个附加的/辅助功能来实现,这段代码应该足够了。我们首先假设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”事件,这足以检测挤压和旋转。可以使用缩放和旋转参数获取所需的数据
以下是一些让您开始学习的代码:
在OSX Chrome上,您可以使用“滚轮”事件来检测挤压、滚动和双指轻敲。您将看到的大多数解决方案都不支持OSX Chrome上的夹点或两个finiger tap,但这将提供支持。以下是如何在所有其他浏览器上对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
}
});
这里有一些信息,但我无法测试
函数设置强制单击行为(someElement)
{
//附加事件侦听器以准备响应强制单击
someElement.addEventListener(“webkitmouseforcewillbegin”,prepareForForceClick,false);
someElement.addEventListener(“webkitmouseforcedown”,enterForceClick,false);
someElement.addEventListener(“webkitmouseforceup”,endForceClick,false);
addEventListener(“webkitmouseforcechanged”,forceChanged,false);
}
关于firefox有手势事件的救生评论。谢谢:)