目前在我的应用程序中,我正在捕捉鼠标滚轮事件并在Canvas元素上执行放大或缩小。如果用户使用Mac并尝试使用触控板执行缩放,则没有事件,实际发生的是放大/缩小浏览器。
有没有办法捕捉使用触控板执行的缩放事件?
至少在Chrome中,触控板“捏合缩放”会触发滚轮/鼠标滚轮事件,就像按下ctrl键一样。您可以像任何其他wheel / mousewheel事件一样捕获此事件,并防止其发生默认情况。以下是使用jQuery的示例:
$("canvas").on("mousewheel", function(e) {
if (e.ctrlKey) {
e.preventDefault();
e.stopImmediatePropagation();
// perform desired zoom action here
}
});
Starting from Safari 9.1你可以从OSX设备捕获缩放和旋转事件。欲了解更多信息,请阅读GestureEvent Class Reference。请注意,这仅适用于Safari,但由于您的问题是关于“Mac触控板缩放”,我认为这是您正在寻找的。
function zoom(e) {
console.log(e.scale)
e.preventDefault()
}
document.addEventListener('gesturestart', zoom)
document.addEventListener('gesturechange', zoom)
document.addEventListener('gestureend', zoom)
附注:iOS上的Safari也支持这些事件。
据我所知,触控板捏合不会触发触摸或手势事件,因此Hammer.js不会检测到它。
我能够使用Hamster.js模拟Chrome中的夹点检测。它将触发鼠标滚轮事件,您可以使用增量来确定用户是放大还是缩小。
这个解决方案在Safari中不起作用。
环顾四周后,这对你有帮助吗?它在讨论中涵盖了web应用程序和javascript,并将hammer.js作为检测夹点事件的可能解决方案... Simplest way to detect a pinch
只用Javascript就无法捕捉到触控板的缩放/缩小