event-listener 相关问题

在下面的代码片段中，如果您：单击红色处并按住单击然后将光标移动到蓝色（尚未释放）然后当您处于...时松开点击在下面的代码片段中，如果您：向下单击红色<div>并按住单击然后将光标移动到蓝色<body>（尚未释放）然后在蓝色时松开点击<body> 然后 e.target 会将点击算作对 <body> 的点击，即使点击实际上发生在 <div> 元素我的场景是一个侧面菜单，当单击正文时应该关闭该菜单，但是，如果单击源自菜单但在正文上释放（就像我的代码片段中发生的情况一样），我不希望菜单关闭。这可以做到吗？ PS：为了澄清，我只是想了解这种行为以及如何获取点击的开始元素而不是现在正在发生的任何内容。我不是问如何构建菜单或任何东西。我还注意到，如果您在 <body> 中开始单击，然后在 <div> 上释放它，它仍然算作对 <body> 的单击。这与我上面演示的效果相反，这让我更加困惑。这是因为它总是选择开始和释放元素的更大祖先吗？当我用谷歌搜索时，我似乎无法得到任何结果。 PS：我正在使用谷歌浏览器，以防这种行为是特定于浏览器的。 document.body.addEventListener("click", (e) => { console.log(e.target); }); body { height: 10rem; background: turquoise; } .div { height: 5rem; display: flex; align-items: center; justify-content: center; background: salmon; } <div class="div">Click Down Here</div> Release Here 我认为您正在寻找 mouseup 事件，而不是 o click ，当指针位于其中时释放指针设备（例如鼠标或触控板）上的按钮时，该事件会在元素上触发。 document.body.addEventListener("mouseup", (e) => { console.log(e.target); }); body { height: 10rem; background: turquoise; } .div { height: 5rem; display: flex; align-items: center; justify-content: center; background: salmon; } <div class="div">Click Down Here</div> Release Here

javascript event-listener

回答 1 投票 0

删除动态React组件中的事件监听器

询问有关在动态反应组件中添加和删除事件侦听器的建议。所以，我有一个包含对象列表的功能组件。它的渲染方式如下： objectList.map( (项目) ...

reactjs dom-events addeventlistener event-listener removeeventlistener

回答 1 投票 0

尝试删除 JavaScript 中的元素时，事件委托未按预期工作

当然，这里有一个关于如何在 Stack Overflow 上提出问题的建议：标题：尝试删除 JavaScript 中的元素时事件委托未按预期工作身体：我正在努力...

javascript dom-events event-listener web-frontend event-delegation

回答 1 投票 0

在视口中滚动子元素

有人可以帮忙吗？我有多个粘性子元素，其中一些具有很高的高度（超过视口）。每个孩子都有以下结构：有人可以帮忙吗？我有多个粘性子元素，其中一些具有很高的高度（超过视口）。每个孩子都有以下结构： <section> <div class="content"> <div class="child"></div> ... 20 more child ... </div> </section> 使用以下CSS： section { min-height: 682px; position: sticky; top: 80px; } .content { height: 618px; overflow-y: scroll; display: flex; flex-direction: column; gap: 5px; } .child { height: 120px; } 我怎样才能实现这种滚动行为：首先我正常滚动身体当我到达高度较高的部分时，我需要滚动该部分直到触及底部当我到达该部分的底部时，我需要正常滚动正文我需要在不手动滚动部分内容而仅滚动正文滚动条的情况下实现此目的.. 我已经写了IntersectionObserver来观察高高度的部分。我认为一个简单的解决方案是在必要时更改父级和子级之间滚动的“焦点”，但我不知道在js中解决此问题的最佳方法是什么。我已经尝试添加滚动事件监听器，然后使用section.scrollBy(0, event.deltaY);滚动该部分的内容但是 event.deltaY 不存在于类型 event: Event in ts... 尝试结合使用 Intersection Observer 和事件监听器。可以设置Intersection Observer来观察高度较高的路段，当它在视口中完全可见时，触发一个函数。 const section = document.querySelector('section'); const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // Call a function to handle scrolling behavior handleSectionScroll(); } }); }); observer.observe(section); 在handleSectionScroll函数中，可以给body添加滚动事件监听器来控制滚动行为。 const handleSectionScroll = () => { document.body.addEventListener('wheel', scrollBody); const scrollBody = (event) => { const sectionHeight = section.getBoundingClientRect().height; const bodyHeight = document.body.getBoundingClientRect().height; const scrollPosition = window.pageYOffset; if (scrollPosition < section.offsetTop) { // Scroll normally return; } if (scrollPosition >= section.offsetTop && scrollPosition < section.offsetTop + sectionHeight - bodyHeight) { // Scroll the section section.scrollBy(0, event.deltaY); event.preventDefault(); } else { // Scroll normally return; } } } 尝试此代码并让我知道结果。

javascript scroll parent-child event-listener intersection-observer

回答 1 投票 0

如果我将事件单独附加到每个表格单元格，会遇到性能问题吗？ [已关闭]

可以将单击事件附加到表格，然后从事件中提取行/列。因此 DOM 将只有一个侦听器。这种方法并不方便，因为我们需要解析事件对象并且

javascript browser event-listener

回答 1 投票 0

event-listener 相关问题

最新问题