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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16877880/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 06:19:52  来源:igfitidea点击:

How do I use pointer-events to react only to scroll event?

javascriptjqueryhtmlcssscroll

提问by Ben Muircroft

Is it possible to set pointer-events to only react to scrolling or drag on a touch-pad? I have a div 'in the way' for scrolling a complex html arrangement* and I would like to know if I can limit the pointer events to only react to scroll / mouse wheel actions.

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

I am interested in knowing whether I understand this correctly. If pointer-events:none;means that all events are void, how can I kill all events but leave one active?

我很想知道我是否正确理解了这一点。如果pointer-events:none;意味着所有事件都无效,我怎样才能杀死所有事件但保留一个活动?

I have set up an HTML area that is bigger than the box it fits in, but if I were to show the scroll bar, it would seem higher than it should be because of a pop-up (position:top) element. This area still needs to be scrolled so to achieve this I have used jQuery to make my 'box to scroll' follow an invisible div within a div:

我已经设置了一个比它适合的框大的 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>

Script

脚本

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

采纳答案by GibboK

As for specification in the docs:

至于文档中的规范:

When an element has applied pointer-events: none;

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

The element is neverthe target of anymouse events and any events are void;

该元素永远不会成为任何鼠标事件的目标,并且任何事件都是无效的;

Please look at this demonstration:

请看这个演示:

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

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

Events are not being fired, you cannot even scroll the container.

事件没有被触发,你甚至不能滚动container.