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
How do I use pointer-events to react only to scroll event?
提问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
.