Mouseenter 委托问题 vanilla js答案

【问题标题】：Mouseenter delegation problems vanilla jsMouseenter 委托问题 vanilla js
【发布时间】：2021-09-30 11:05:09
【问题描述】：

我正在尝试使用 vanilla Javascript 创建一个放大功能，它使用 jquery 非常容易，但使用 Javascript 时，mouseenter 函数会触发多次。结果我在我的 html 中多次收到 <div class="sp-zoom">...。

如何阻止它多次触发？

我已经在 StackOverflow 上尝试了很多不同的解决方案，但我无法完成这项工作。

这里是一个简单的例子：

document.querySelector('.sp-large').addEventListener('mouseenter', event => {
    var largeUrl = document.querySelector('.sp-large').querySelector('a').getAttribute('href');
    document.querySelector('.sp-large').innerHTML += '<div class="sp-zoom"><img src="' + largeUrl + '"/></div>';
    document.querySelector('.sp-zoom').style.display = 'block';
    event.preventDefault();
});

&lt;div class="sp-large"&gt;&lt;a href="https://mvz-bietigheim.de/wp-content/uploads/2017/05/placeholder-image10.jpg" class="sp-current-big"&gt;&lt;img src="https://www.bestructural.com/wp-content/uploads/2015/03/generic-image-placeholder.png" width="600" height="464" alt=""&gt;&lt;/a&gt;&lt;/div&gt;

根据要求提供工作 jquery 版本：

$(document.body).on('mouseenter', '.sp-non-touch .sp-large', function(event) {
  var largeUrl = $('a', this).attr('href');
  $(this).append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
  $(this).find('.sp-zoom').fadeIn(250);
  event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sp-large"><a href="https://mvz-bietigheim.de/wp-content/uploads/2017/05/placeholder-image10.jpg" class="sp-current-big"><img src="https://www.bestructural.com/wp-content/uploads/2015/03/generic-image-placeholder.png" width="600" height="464" alt=""></a></div>

【问题讨论】：

我的猜测是更改 innerHTML 会以某种方式重新触发 mouseenter 事件。
问题是您从其他元素获取 mouseenter 事件冒泡吗？是否需要检查事件的目标并丢弃目标错误的？
你能展示工作的jQuery版本吗，因为你上面使用的逻辑没有多大意义。你在.sp-large 上做一个鼠标，然后将你的缩放添加到同一个 div 中，所以由于事件冒泡它变得无限。
当前代码不检查是否已经存在缩放 div，并在每个 mouseenter 处添加新的。也许您需要默认显示缩放 div 但隐藏并在悬停时显示？可以只用 css 完成
除此之外，您可能想写成document.querySelector('.sp-large a') 而不是像document.querySelector('.sp-large').querySelector('a') (stackoverflow.com/questions/38228487/…) 这样写。

标签： javascript delegation

【解决方案1】：

您必须在鼠标离开时清除<div class="sp-zoom"><img src="' + largeUrl + '"/></div> - 我认为您可以通过这种方式实现。

【讨论】：

这应该是评论，没有答案。
对不起！这是我的错