仅在父级上捕获或取消JS滚轮事件-子级不捕获或取消

Cronoklee

我知道有关此主题的问题很多,但我似乎找不到确切的实例。

我只想捕获父级上的滚轮事件,但使它们在子元素上正常工作。但是,一旦我在父级上添加了一个侦听器,子级就会中断。

孩子们不应该在父母取消活动之前收到活动吗?事件冒泡似乎在这里倒退了。

document.getElementById('parent').addEventListener('wheel',function(e){
    //some custom code here
    e.preventDefault()
})
div{ border:solid 5px #999; height:300px; overflow-y:auto; }

#parent{ border-color:red; white-space:no-wrap;}
    #parent div{ width:100px; display:inline-block}
<div id='parent'>
<p>TRY SCROLL WHEEL!</p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque viverra justo nec ultrices. Neque gravida in fermentum et. Gravida quis blandit turpis cursus in hac habitasse. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu dictum varius duis at. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Urna nunc id cursus metus aliquam eleifend mi in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Etiam dignissim diam quis enim lobortis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Leo duis ut diam quam nulla porttitor. Ultrices in iaculis nunc sed augue lacus viverra. Dolor morbi non arcu risus quis varius. Sed pulvinar proin gravida hendrerit lectus a. Sit amet massa vitae tortor condimentum lacinia.
</div>
<div>Some more content2</div>
<div>Some more content3</div>
<div>Sit amet mattis vulputate enim nulla. Feugiat vivamus at augue eget arcu. Elementum eu facilisis sed odio. Eu sem integer vitae justo eget. Id nibh tortor id aliquet lectus. Id volutpat lacus laoreet non curabitur gravida arcu ac. Pellentesque dignissim enim sit amet. Enim blandit volutpat maecenas volutpat blandit aliquam. Blandit turpis cursus in hac habitasse platea. Facilisis leo vel fringilla est ullamcorper eget. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Nisi scelerisque eu ultrices vitae auctor eu augue ut.

Amet porttitor eget dolor morbi. Proin libero nunc consequat interdum varius sit. Laoreet sit amet cursus sit amet dictum sit amet. Integer quis auctor elit sed vulputate mi sit amet. Vulputate sapien nec sagittis aliquam. Vitae congue eu consequat ac felis. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Amet porttitor eget dolor morbi non arcu risus. Habitant morbi tristique senectus et netus et malesuada. Eu ultrices vitae auctor eu augue ut lectus. Adipiscing at in tellus integer feugiat scelerisque. Volutpat consequat mauris nunc congue nisi vitae. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Vitae aliquet nec ullamcorper sit amet risus. Nisl tincidunt eget nullam non nisi est sit. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Eget nunc scelerisque viverra mauris in aliquam sem. Amet consectetur adipiscing elit duis tristique sollicitudin. Proin gravida hendrerit lectus a.</div>
<p>Some more content down here</p>
</div>

特里米

找到了解决方法:

document.getElementById('parent').addEventListener('wheel',function(e){
  e.preventDefault();
});
var elements = document.getElementById('parent').getElementsByTagName('div');
for(let i = 0; i<elements.length; i++){
  elements[i].addEventListener('wheel',function(e){
    this.scrollTop += -1*e.wheelDelta;
  });
}
div{ border:solid 5px #999; height:300px; overflow-y:auto; }

#parent{ border-color:red; white-space:no-wrap;}
  #parent div{ width:100px; display:inline-block}
<div id='parent'>
<p>TRY SCROLL WHEEL!</p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque viverra justo nec ultrices. Neque gravida in fermentum et. Gravida quis blandit turpis cursus in hac habitasse. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu dictum varius duis at. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Urna nunc id cursus metus aliquam eleifend mi in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Etiam dignissim diam quis enim lobortis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Leo duis ut diam quam nulla porttitor. Ultrices in iaculis nunc sed augue lacus viverra. Dolor morbi non arcu risus quis varius. Sed pulvinar proin gravida hendrerit lectus a. Sit amet massa vitae tortor condimentum lacinia.
</div>
<div>Some more content2</div>
<div>Some more content3</div>
<div>Sit amet mattis vulputate enim nulla. Feugiat vivamus at augue eget arcu. Elementum eu facilisis sed odio. Eu sem integer vitae justo eget. Id nibh tortor id aliquet lectus. Id volutpat lacus laoreet non curabitur gravida arcu ac. Pellentesque dignissim enim sit amet. Enim blandit volutpat maecenas volutpat blandit aliquam. Blandit turpis cursus in hac habitasse platea. Facilisis leo vel fringilla est ullamcorper eget. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Nisi scelerisque eu ultrices vitae auctor eu augue ut.

Amet porttitor eget dolor morbi. Proin libero nunc consequat interdum varius sit. Laoreet sit amet cursus sit amet dictum sit amet. Integer quis auctor elit sed vulputate mi sit amet. Vulputate sapien nec sagittis aliquam. Vitae congue eu consequat ac felis. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Amet porttitor eget dolor morbi non arcu risus. Habitant morbi tristique senectus et netus et malesuada. Eu ultrices vitae auctor eu augue ut lectus. Adipiscing at in tellus integer feugiat scelerisque. Volutpat consequat mauris nunc congue nisi vitae. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Vitae aliquet nec ullamcorper sit amet risus. Nisl tincidunt eget nullam non nisi est sit. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Eget nunc scelerisque viverra mauris in aliquam sem. Amet consectetur adipiscing elit duis tristique sollicitudin. Proin gravida hendrerit lectus a.</div>
<p>Some more content down here</p>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

关闭事件委派-DOM父级上的事件侦听器,涵盖给定类的子级/子级

来自分类Dev

子窗口不捕获WM_MOUSEWHEEL事件

来自分类Dev

永不捕获的例外

来自分类Dev

仅在父级Div上跟踪onBlur事件

来自分类Dev

父级点击事件与子级点击事件重叠

来自分类Dev

Javascript DOM ChildNodes属性无法捕获所有子级

来自分类Dev

聚合物:从父级捕获子级元素的事件

来自分类Dev

子级任务已取消,父级已完成?

来自分类Dev

尝试/捕获不捕获异常

来自分类Dev

取消父级监听器的链接是否将其应用于Firebase中的子级

来自分类Dev

React-如何仅捕获父级的onClick事件而不捕获子级的事件

来自分类Dev

仅在父级sknode上运行操作

来自分类Dev

reactjs尝试在渲染中捕获不捕获子级错误

来自分类Dev

仅在父级-子级层次关系数据中的父级上的C#LINQ Orderby

来自分类Dev

向父级展示子级事件

来自分类Dev

Vanilla JS:捕获包装元素单击,但不捕获其子元素

来自分类Dev

鼠标移动事件上的鼠标位置设置在父级而不是子级上

来自分类Dev

SupervisorScope取消其父级

来自分类Dev

尝试/捕获不捕获HTTPError

来自分类Dev

在父级中捕获子级错误

来自分类Dev

关闭事件委派-DOM父级上的事件侦听器,涵盖给定类的子级/子级

来自分类Dev

父级点击事件与子级点击事件重叠

来自分类Dev

Javascript DOM ChildNodes属性无法捕获所有子级

来自分类Dev

当父级的onInterceptTouchEvent()返回true时,我在哪里可以在子级中捕获ACTION_CANCEL?

来自分类Dev

Angular2:指令:捕获子级的点击事件

来自分类Dev

从父级捕获 iFrame onhashchange 事件

来自分类Dev

矩形上的 QML 拖动不捕获事件

来自分类Dev

XPath 捕获 <li> 的特定文本值,但不捕获其子元素

来自分类Dev

keyPress() 不捕获按键事件 AWT

Related 相关文章

  1. 1

    关闭事件委派-DOM父级上的事件侦听器,涵盖给定类的子级/子级

  2. 2

    子窗口不捕获WM_MOUSEWHEEL事件

  3. 3

    永不捕获的例外

  4. 4

    仅在父级Div上跟踪onBlur事件

  5. 5

    父级点击事件与子级点击事件重叠

  6. 6

    Javascript DOM ChildNodes属性无法捕获所有子级

  7. 7

    聚合物:从父级捕获子级元素的事件

  8. 8

    子级任务已取消,父级已完成?

  9. 9

    尝试/捕获不捕获异常

  10. 10

    取消父级监听器的链接是否将其应用于Firebase中的子级

  11. 11

    React-如何仅捕获父级的onClick事件而不捕获子级的事件

  12. 12

    仅在父级sknode上运行操作

  13. 13

    reactjs尝试在渲染中捕获不捕获子级错误

  14. 14

    仅在父级-子级层次关系数据中的父级上的C#LINQ Orderby

  15. 15

    向父级展示子级事件

  16. 16

    Vanilla JS:捕获包装元素单击,但不捕获其子元素

  17. 17

    鼠标移动事件上的鼠标位置设置在父级而不是子级上

  18. 18

    SupervisorScope取消其父级

  19. 19

    尝试/捕获不捕获HTTPError

  20. 20

    在父级中捕获子级错误

  21. 21

    关闭事件委派-DOM父级上的事件侦听器,涵盖给定类的子级/子级

  22. 22

    父级点击事件与子级点击事件重叠

  23. 23

    Javascript DOM ChildNodes属性无法捕获所有子级

  24. 24

    当父级的onInterceptTouchEvent()返回true时,我在哪里可以在子级中捕获ACTION_CANCEL?

  25. 25

    Angular2:指令:捕获子级的点击事件

  26. 26

    从父级捕获 iFrame onhashchange 事件

  27. 27

    矩形上的 QML 拖动不捕获事件

  28. 28

    XPath 捕获 <li> 的特定文本值,但不捕获其子元素

  29. 29

    keyPress() 不捕获按键事件 AWT

热门标签

归档