Question

我有一个图像列表，列表包含一个JPG图像，鼠标悬停图像被替换为GIF动画，一些文本显示在图像上方。

问题是文本正在触发mouseover / mouseout事件。我试图添加stopPropagation（）函数，但它现在正在工作。

还有什么可以做，或者我做错了什么？

JSFiddle：https://jsfiddle.net/alokjain_lucky/8f2gqua4/

HTML代码：

<ul class="images-list">
  <li data-gif="https://res.cloudinary.com/hu0zdcb0k/image/upload/fl_lossy,q_25/rbgo5mkmu0dldrtobrwg.gif" data-jpg="https://res.cloudinary.com/hu0zdcb0k/image/upload/w_180,h_180,q_55,c_fill,g_face,e_improve/vt5yhnzexh3vqa89hbtz.jpg">
<a href="https://www.picnic.lol/qrVy4yA">
  <img src="https://res.cloudinary.com/hu0zdcb0k/image/upload/w_180,h_180,q_55,c_fill,g_face,e_improve/vt5yhnzexh3vqa89hbtz.jpg" alt="" width="167" height="168">
</a>
<span class="image_caption">Some text here</span>

JS代码：

$(document).ready(function() {
  $('.images-list li').on('mouseover', function(e) {
    e.stopPropagation();
    var self = $(this);

    self.find('.image_caption').stop().fadeIn('slow');
    var image = new Image();
    image.src = $(this).data('gif');
    image.onload = function() {
        self.find('img').attr('src', image.src);
    }
    image.onerror = function() {
        console.error("Cannot load image");
    }
  })

  $('.images-list li').on('mouseleave', function(e) {
    e.stopPropagation();
    $(this).find('img').attr('src', $(this).data('jpg'));
    $(this).find('.image_caption').stop().fadeOut('slow');
  });
})

Answer 1

stopPropagation不会有帮助，因为它只会阻止同一事件传播到其他元素。你的案子是在另一个时间开枪。您需要使用mouseenter而不是mouseover。

$(document).ready(function() {
  $('.images-list li').on('mouseenter', function(e) {
    var self = $(this);

    self.find('.image_caption').stop().fadeIn('slow');
    var image = new Image();
    image.src = $(this).data('gif');
    image.onload = function() {
        self.find('img').attr('src', image.src);
    }
    image.onerror = function() {
        console.error("Cannot load image");
    }
  })

  $('.images-list li').on('mouseleave', function(e) {
    e.stopPropagation();
    $(this).find('img').attr('src', $(this).data('jpg'));
    $(this).find('.image_caption').stop().fadeOut('slow');
  });
})

Answer 2

使用mouseenter（MDN）代替mouseover（MDN）。

stopPropagation在jquery中不起作用

2 个答案: