鼠标悬停和鼠标悬停在Firefox上不起作用？答案

【问题标题】：Mouseover and mouseout not working on firefox?鼠标悬停和鼠标悬停在Firefox上不起作用？
【发布时间】：2015-04-04 22:47:32
【问题描述】：

我想在鼠标悬停时尝试图像幻灯片放映并在鼠标移出时停止以下是我的代码：但是鼠标悬停在鼠标上也可以调用..它在 chrome 上工作正常...

default_image = '';
timer = 0;

jQuery('.sales-product-images').on('mouseover',function(){
    var counter = 0;
    var selector = jQuery(this);
    var pd_id = jQuery(this).attr('id');
    var imageArray = jQuery.parseJSON(images);
    var product_images= imageArray[pd_id];
    default_image = jQuery(this).attr('data-image');
    console.log('default-image= ' + default_image);
    timer = setInterval(function(){selector.fadeOut("fast", function () {
        console.log(counter);
        if (counter === product_images.length) {
            console.log('==');
            counter = 0;
        }
        console.log('localhost/product/' + product_images[counter]);
        selector.attr('src', 'localhost/product/' + product_images[counter]);
        selector.fadeIn(2500);
        counter = counter+ 1;
    });
}, 2000)});


jQuery('.sales-product-images').on('mouseleave', function() {
    console.log('now end');
    // var counter = 0;
    clearInterval(timer);
)};

问题是：“现在结束”也打印在 Firefox 中的鼠标悬停上。这不应该是。

【问题讨论】：

请创建一个 JSFiddle 或类似的东西...
用户mouseenter() 而不是mouseover()

标签： javascript jquery slideshow mouseover mouseout

【解决方案1】：

这个问题很可能是由mouseover 与mouseleave 一起使用引起的，它的配对事件应该是mouseout。配对如下所示。

鼠标悬停/鼠标移出

$( ".sales-product-images" )
   .mouseover(function() {
      console.log("mouse over");
   })
   .mouseout(function() {
      console.log("mouse out");
});

mouseenter / mouseleave

$( ".sales-product-images" )
   .mouseenter(function() {
      console.log("mouse enter");
   })
   .mouseleave(function() {
      console.log("mouse leave");
});

以上方法是.on("", function(){})方法的快捷方式。

您可以按如下方式重写您的 javascript：

default_image = '';
timer = 0;

jQuery('.sales-product-images').mouseover(function(){
    var counter = 0;
    var selector = jQuery(this);
    var pd_id = jQuery(this).attr('id');
    var imageArray = jQuery.parseJSON(images);
    var product_images= imageArray[pd_id];
    default_image = jQuery(this).attr('data-image');
    console.log('default-image= ' + default_image);
    timer = setInterval(function(){
        selector.fadeOut("fast", function () {
            console.log(counter);
            if (counter === product_images.length) {
                console.log('==');
                counter = 0;
            }
            console.log('localhost/product/' + product_images[counter]);
            selector.attr('src', 'localhost/product/' + product_images[counter]);
            selector.fadeIn(2500);
            counter = counter+ 1;
        });
    }, 2000);
}).mouseout(function() {
    console.log('now end');
    // var counter = 0;
    clearInterval(timer);
});

【讨论】：

感谢@Jeemusu，我也使用了mouseout，但在firefox上“现在结束”在鼠标悬停时打印
最后一组括号在您的代码中的顺序错误。应该是 }); 而不是 )};。当我修复这些时，我在 Firefox 中工作正常。

【解决方案2】：

试试这个：

jQuery('.sales-product-images').on('mouseout', function() {
   console.log('now end');
   // var counter = 0;
  clearInterval(timer);
)};

【讨论】：