欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

jQuery：mouseenter事件和mouseleave事件造成闪烁的问题

程序员文章站 2023-12-26 11:00:15
...
大家好。今天我在做一个图片放大镜的jquery插件。类似于京东上那种商品图片的放大镜。

我发现我在image对象上绑定了mouseenter和mouseleave后，当鼠标在image上移动是会同时触发mouseenter和mouseleave，造成了闪烁。可是我并不期望mouseenter, mouseleave被反复调用，甚至是同时发生。应该如何解决呢？尝试了网上的几种方法都不太可行。

多谢各位。

$.fn.magnify = function() {
    //var glassBox = options.glassBox || {};
    //var detailBox = options.detailBox || {};

    var glassBox = $('<span></span>');

    glassBox.css({
        "width": this.width() / 2 + 'px',
        "height": this.height() /2 + 'px',
        "background-color": 'grey',
        "position": "absolute",
        "left" : '0px',
        "top": '0px',
        'opacity': '0.2',
        'display': 'none',
        'border': '1px solid blue',
        'z-index': 10

    });

    $(this).after(glassBox);
    //glassBox.hide();

    var detailBox = $('<div></div>');
    var detailImage = $('<img></img>');
    
    detailBox.css({
        "width": this.width(),
        "height": this.height(),
        "display": 'none',
        "position": 'relative',
        "overflow": 'hidden'
        //"background-color": 'lime'
    });
    detailImage.css({
        "position": 'absolute'
    });
    detailImage.attr("src", this.attr("src"));
    detailBox.append(detailImage);
    this.after(detailBox);


    this.mouseenter(function(event){
        //event.stopPropagation();
        glassBox.get(0).style.display = 'block';
        detailBox.get(0).style.display = 'block';
        
        

    });
    this.mouseleave(function(event){    
        //event.stopPropagation();
        if (event.relatedTarget !== "span") {
            glassBox.get(0).style.display = 'none';
        detailBox.get(0).style.display = 'none';
        }
        
    });

    this.mousemove(function(event) {
        /* Act on the event */
        var x = event.pageX - this.offsetLeft - glassBox.width() / 2;
        var y = event.pageY - this.offsetTop - glassBox.height() /2;
        if (x < 0 ) {
            x = 0;
        } else if ( x > this.offsetWidth - glassBox.width()) {
            x = this.offsetWidth - glassBox.width();
        }
        if (y < 0) {
            y = 0;
        } else if (y > this.offsetHeight - glassBox.height()) {
            y = this.offsetHeight - glassBox.height();
        }
        glassBox.css({
            left: x + 'px',
            top:  y + 'px'
        });

        detailImage.css({
        "left": -3.5 * (event.pageX - this.offsetLeft) + 'px',
        "top": -3.5 * (event.pageY - this.offsetTop) + 'px'
    });
    });
}

HTML如下：

<html>
    <head>
        <script src="jquery-1.11.3.js"></script>
        <script src="magnify.js"></script>
    </head>
    <style>
        #imgTarget{
            width: 300px;
            height: 200px;
        }
        #imageArea{
            position: relative;
        }
    </style>
    <body>
        <div id="imageArea">
            <img id="imgTarget" src="car.jpg"/>
        </div>

        <script>
            $( document ).ready( function(){
                $("#imgTarget").magnify();
            } );

        </script>


    </body>


</html>

闪烁的原因是这样的：

你把mouseenter mouseleave事件绑定在了img上面

mouseenter img时，你又生成了一个glassBox

glassBox在img的上层，于是挡住了img和鼠标光标，于是产生了一个对于img的mouseleave

于是代码又把glassBox display=none了，mouse又能重新enter到img了

解决方案1
不是用mouseenter mouseleave，直接在mousemove里面对鼠标的位置是否在img的范围内进行判断。

解决方案2
创建一个覆盖层，和img一样大小：

<div id="imageArea">
 <img id="imgTarget" src="card.jpg"/>
 <div id="overlay"></div>
</div>
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  background: red;
  opacity: 0.5;
  z-index: 3;
}

保证img glassBox overlay的z-index顺序：

glassBox.css({
        "width": this.width() / 2 + 'px',
        "height": this.height() /2 + 'px',
        "background-color": 'grey',
        "position": "absolute",
        "left" : '0px',
        "top": '0px',
        'opacity': '0.2',
        'display': 'none',
        'border': '1px solid blue',
        'z-index': 2 // 保证glassBox在overlay的下面，在img的上面
    });

事件都绑定在overlay上面：

$( document ).ready( function(){
    $("#overlay").magnify(); 
} );

以上就是jQuery：mouseenter事件和mouseleave事件造成闪烁的问题的详细内容，更多请关注其它相关文章！

相关标签： mouseleave mouseenter jQuery

上一篇：

下一篇：

推荐阅读