冒泡滚动/鼠标滚轮事件
我已经设置了我的应用程序/网站，这样我在滚动面板顶部有一个绝对定位的画布元素，当滚动面板滚动时，我将偏移量应用到画布上，使其看起来像图像正在滚动（这使我可以巨大的画布，没有巨大画布元素的开销）。问题是，当我的鼠标悬停在画布元素上时，滚轮不起作用，因为滚动事件不会冒泡。然而，在这种情况下，我需要冒泡才能使滚动条正常工作。
我为此使用 GWT，所以我不想依赖 jQuery 解决方案（尽管纯 javascript 解决方案也可以），因为混合两者有点困难。我可以捕获鼠标滚轮事件，但主要问题是它似乎无法区分滚轮滚动（上/下）和倾斜（左/右）。我尝试了 eventGetShiftKey()、eventGetButton()、eventGetType() 和其他一些方法，但所有这些方法都返回相同的滚动和倾斜结果（向左倾斜 = 向上滚动，向右倾斜 = 向下滚动）。
处理此问题的最佳方法似乎是将实际事件冒泡到滚动面板（顺便说一下，滚动面板还包含包含绝对定位画布的父 div），但我不确定这是否可能？
I've setup my app/website such that I have an absolute-positioned canvas element on top of a scrollpanel, when the scrollpanel scrolls I apply on offset to the canvas to make it look like the image is scrolling (this allows me to have huge canvas without the overhead of a huge canvas element). The problem is, when my mouse is over the canvas element, the scroll wheel does not work, since the scroll event does not bubble. In this case, however, I need the bubbling to get the scrollbar to work.
I'm using GWT for this, so I'd prefer not to rely on a jQuery solution (although a pure javascript solution would be ok) since it's kinda hard to mix the two. I can capture the mousewheel event, but the main problem with that is that it doesn't seem to differentiate between scrolling (up/down) and tilting of the wheel (left/right). I tried eventGetShiftKey(), eventGetButton(), eventGetType(), and some others but all those methods return the same exact result for scrolling and tilting (tilt left = scroll up, tilt right = scroll down).
It seems like the best way to handle this is to bubble the actual event to the scrollpanel (which by the way also contains the parent div that contains the absolute-positioned canvas), but I'm not sure if that's possible?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Mousewheel 事件确实会冒泡，为了区分向上/向下滚动，请使用 event.wheelDelta 和 event.detail 属性。
另请参阅这篇文章 其中谈到了一些关于标准化的内容。
Mousewheel event does bubble, to differentiate between up/down scrolling use the
event.wheelDeltaandevent.detailattributes.Also see this article which talks a bit about normalizing.