집 > 기사 > 웹 프론트엔드 > jQuery: mouseenter 이벤트 및 mouseleave 이벤트로 인해 깜박임 문제가 발생함

jQuery: mouseenter 이벤트 및 mouseleave 이벤트로 인해 깜박임 문제가 발생함

黄舟원래의: 2017-06-28 10:11:033325검색

안녕하세요 여러분. 오늘은 이미지 돋보기용 jquery 플러그인을 만들고 있습니다. JD.com의 상품사진 돋보기와 비슷합니다.

mouseenter와 mouseleave를 이미지 객체에 바인딩한 후 마우스가 이미지 위에서 움직일 때 mouseenter와 mouseleave가 동시에 실행되어 깜박임을 유발하는 것을 발견했습니다. 그러나 나는 mouseenter와 mouseleave가 동시에 반복적으로 호출될 것이라고 기대하지 않습니다. 어떻게 해결하나요? 온라인에서 여러 가지 방법을 시도했지만 아무 소용이 없었습니다.

모두 감사합니다.

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

    var glassBox = $(&#39;<span></span>&#39;);

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

    });

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

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


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

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

    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 + &#39;px&#39;,
            top:  y + &#39;px&#39;
        });

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

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를 실행하면 img의 상위 레이어에 glassBox

glassBox가 생성되었으므로 img와 마우스 커서를 차단하면 img에 대한 mouseleave가 생성됩니다

그래서 코드는 glassBox display=none을 다시 설정하고 마우스는 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 오버레이의 Z-색인 순서 보장:

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

이벤트는 오버레이에 바인딩됩니다:

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

위 내용은 jQuery: mouseenter 이벤트 및 mouseleave 이벤트로 인해 깜박임 문제가 발생함의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jQuery: 마우스가 빠르게 움직일 때 mouseleave 이벤트가 실행되지 않는 문제 해결다음 기사：jQuery: 마우스가 빠르게 움직일 때 mouseleave 이벤트가 실행되지 않는 문제 해결