我如何使用指针事件只对滚动事件作出反应? [英] How do I use pointer-events to react only to scroll event?

查看:71
本文介绍了我如何使用指针事件只对滚动事件作出反应?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否可以将指针事件设置为仅对滚动或拖动触摸板起反应?我有一个用于滚动复杂HTML安排的'方法'*,我想知道是否可以限制指针事件只响应滚动/鼠标滚轮操作。



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



我已经建立了一个比它适合的盒子大的HTML区域,但是如果我要显示滚动条,由于弹出式(位置:顶部)元素,它看起来应该比它应该更高。这个区域仍然需要滚动才能实现这一点我已经使用jQuery使我的'框滚动'按照一个div内的无形div:

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

脚本

 <$ ($#$'''''$'$'$'''')。$($#'$''')。 ).top +'px'
});
});


解决方案

至于文档中的规范



元素应用了指针事件:无;



该元素从不 任何鼠标事件的目标,任何事件都是无效的;

请看这个演示:

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



事件没有被解雇,你甚至不能滚动容器

code>。


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.

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?

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:

<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'
  });
});

解决方案

As for specification in the docs:

When an element has applied pointer-events: none;

The element is never the target of any mouse events and any events are void;

Please look at this demonstration:

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

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

这篇关于我如何使用指针事件只对滚动事件作出反应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆