如何使用指针事件仅对滚动事件做出反应？

Posted 2023-02-22

【中文标题】如何使用指针事件仅对滚动事件做出反应？

【英文标题】：How do I use pointer-events to react only to scroll event?

【发布时间】：2013-05-28 11:46:36

【问题描述】：

是否可以将指针事件设置为仅对触摸板上的滚动或拖动做出反应？我有一个 div 用于滚动复杂的 html 排列*，我想知道是否可以将指针事件限制为仅对滚动/鼠标滚轮动作做出反应。

我很想知道我是否理解正确。如果pointer-events:none; 意味着所有事件都是无效的，我怎样才能杀死所有事件但让一个处于活动状态？

我已经设置了一个比它适合的框更大的 HTML 区域，但是如果我要显示滚动条，由于弹出 (position:top) 元素，它看起来比它应该的要高.这个区域仍然需要滚动，所以为了实现这一点，我使用 jQuery 使我的“滚动框”跟随 div 中的不可见 div：

<div id="scrollcontrol"style="overflow-y:auto;overflow-x:hidden;position:absolute;
   top:12px;left:180px;width:40px;height:1300px;">
   <div id="catscrollpos"style="position:absolute;
    top:0px;width:200px;height:2250px;">
   </div>
</div>

脚本

$('#scrollcontrol').scroll(function(
  $('#rangetable').css(
  'top':$('#catscrollpos').position().top+'px'
  );
);

【问题讨论】：

该属性源自 SVG 规范，对于 HTML 元素，它仍然非常有限（参见 developer.mozilla.org/en-US/docs/Web/CSS/pointer-events）。在 HTML 元素上，pointer-events 唯一受支持的值是 none，它使元素完全忽略指针事件（尽管事件可能会冒泡到元素下方的父元素），以及设置默认行为的 auto .

请检查是否可以使用触摸设备的滚动事件。 w3schools.com/jquerymobile/jquerymobile_events_scroll.asp

【参考方案1】：

至于docs中的规范：

当一个元素应用了pointer-events: none;

元素从不任何鼠标事件的目标，任何事件都是无效的；

请看这个演示：

http://jsbin.com/wewosumehi/1/

没有触发事件，您甚至无法滚动container。

【讨论】：

哦，太可惜了

这回答了所问的问题，但我和我确信 OP 想知道是否还有其他方法可以实现这一点。基本上，是否有任何等效于“指针事件：无”仍然允许滚动？我也希望滚动条可以点击，但我不确定 OP。

那么，有没有办法限制除滚动之外的所有鼠标事件？

> 事件没有被触发，你甚至不能滚动容器。 -- 除了body。当 pointer-events: none; 应用到它时，正文会滚动。