【问题标题】:Edge alternative solution to capturing wheel/mousewheel event when using trackpad使用触控板时捕获滚轮/鼠标滚轮事件的边缘替代解决方案
【发布时间】:2019-09-03 17:16:40
【问题描述】:

Edge 上存在一个错误,即当您使用精确触控板时,滚轮/鼠标滚轮事件不会触发。

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7134034/

问题显示为已修复,但尚未修复(已在 Lenovo 笔记本和 Surface Pro with Edge 最新版本上测试)

有没有办法捕捉到这个事件?我尝试使用覆盖元素并捕获滚动事件,它可以工作,但是由于该覆盖,您无法单击页面上的任何内容,并且给它指针事件:无会禁用滚动事件。

有什么想法吗?

【问题讨论】:

    标签: javascript events microsoft-edge


    【解决方案1】:

    在您指出的未解决问题中,Microsoft Edge 团队表示该问题已通过他们在this blog post 中概述的 PTP 指针事件的实施得到解决。

    在 HTML 中,将 touch-action CSS 属性添加到目标元素,以防止浏览器执行其默认的触摸行为以响应手势:

    <canvas height=400 width=400 id="canvas" style="touch-action: none;"></canvas>
    

    在 JavaScript 中,将指针事件侦听器附加到您的目标元素。您可以使用传递给事件侦听器回调的事件对象的 pointerType 属性来确定导致调用处理程序的指针类型:

    document.getElementById('canvas').addEventListener('pointermove', function(event) {
        console.log('pointermove!');
    });
    

    您可以参考this doc了解更多关于点事件的详细信息。

    【讨论】:

    • 谢谢,我实际上最终使用了pointermove,对于任何感兴趣的人,你有一个名为pointerType的事件属性,它可以是“触摸”或“鼠标”,只有在使用两根手指时才能触摸,所以我使用带有 delta 的 pageY 属性来检查当指针类型被触摸时鼠标是向上还是向下移动。有点棘手,但它的工作! 重要提示:touch-action 应设置为 none,否则它将不起作用,但是这会禁用用两根手指向左或向右滑动以在历史之间来回导航的选项。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多