[jquery] jQuery에서 마우스가 요소 위에 있는지 어떻게 확인합니까?

내가 누락 된 jQuery 에서이 작업을 수행하는 빠르고 쉬운 방법이 있습니까?

이미 다른 용도로 사용하고 있기 때문에 mouseover 이벤트를 사용하고 싶지 않습니다. 마우스가 주어진 순간에 요소 위에 있는지 알아야합니다.

“IsMouseOver”함수 만있는 경우 다음과 같은 작업을 수행하고 싶습니다.

function hideTip(oi) {
    setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}

답변

마우스 아웃 시간 초과를 페이드 아웃하도록 설정하고 반환 값을 객체의 데이터에 저장합니다. 그런 다음 onmouseover에서 데이터에 값이 있으면 시간 초과를 취소하십시오.

페이드 아웃의 콜백 데이터를 제거하십시오.

어린이가 마우스 오버 / 마우스 아웃을 할 때 메뉴에 대해 실행되지 않기 때문에 실제로 마우스 입력 / 마우스 레이브를 사용하는 것이 저렴합니다.

답변

이 코드 는 해리 와 내가 말하려는 행복한 시간을 보여줍니다 . 마우스가 들어가면 툴팁이 나오고 마우스가 떠날 때 사라지는 지연을 설정합니다. 지연이 트리거되기 전에 마우스가 동일한 요소에 들어가면 이전에 저장 한 데이터를 사용하여 트리거가 해제되기 전에 트리거를 제거합니다.

$("someelement").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".tooltip").fadeIn("slow");
}).mouseleave(function(){
    var someElement = $(this),
        timeoutId = setTimeout(function(){
            someElement.find(".tooltip").fadeOut("slow");
        }, 650);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId);
});

답변

깨끗하고 우아한 호버 확인 :

if ($('#element:hover').length != 0) {
    // do something ;)
}

답변

경고 : is(':hover')jquery 1.8 이상에서는 더 이상 사용되지 않습니다. 해결책 은 이 게시물 을 참조하십시오 .

https://stackoverflow.com/a/6035278/8843 이 대답을 사용 하여 마우스가 요소 위에 있는지 확인하십시오.

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

답변

jQuery의 hover이벤트를 사용 하여 수동으로 추적 할 수 있습니다.

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!

답변

나는 좀 더 복잡한 환경과 많은 ‘mouseenters’와 ‘mouseleaves’가 제대로 작동하지 않는 솔루션에서 정확히 이와 같은 것을 필요로 했으므로 ismouseover 메소드를 추가하는 작은 jquery 플러그인을 만들었습니다. 그것은 지금까지 꽤 잘 작동했습니다.

//jQuery ismouseover  method
(function($){
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {
        var result = false;
        this.eq(0).each(function() {
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });
        return result;
    };
})(jQuery);

그런 다음 문서의 어느 위치에서나 다음과 같이 호출하면 true 또는 false가 반환됩니다.

$("#player").ismouseover()

IE7 +, Chrome 1+ 및 Firefox 4에서 테스트했으며 제대로 작동합니다.

답변

jQuery에서는 .is ( ‘: hover’)를 사용할 수 있으므로

function IsMouseOver(oi)
{
   return $(oi).is(':hover');
}

이제 OP에서 요청한 기능을 제공하는 가장 간결한 방법입니다.

참고 : 위의 IE8 이하에서는 작동하지 않습니다

IE8에서 작동하는 간결한 대안 (IE9의 IE8 모듈러스를 신뢰할 수있는 경우)은 어디서나 트리거하지 않고 $(...).hover(...)요소 선택기를 알 필요가 없습니다 (이 경우 Ivo의 대답이 더 쉽습니다).

function IsMouseOver(oi)
{
    return oi.length &&
           oi.parent()
             .find(':hover')
             .filter(function(s){return oi[0]==this})
             .length > 0;
}