programing

(마우스 오버/아웃 설정 없이) 호버가 있는지 확인하는 순수한 자바스크립트

powerit 2023. 10. 30. 21:19
반응형

(마우스 오버/아웃 설정 없이) 호버가 있는지 확인하는 순수한 자바스크립트

저는 다음과 같은 jQuery 구문을 본 적이 있습니다.

if($(element).is(':hover')) { do something}

저는 jQuery를 사용하지 않기 때문에 순수 자바스크립트로 이것을 할 수 있는 가장 좋은 방법을 찾고 있습니다.

글로벌 변수를 유지하고 이 변수를 사용하여 설정/해제할 수 있다는 것을 알고 있습니다.mouseover그리고.mouseout, 대신 DOM을 통해 원소의 고유 특성을 검사할 수 있는 방법이 없을까요?아마 이런 거겠지.

if(element.style.className.hovered === true) {do something}

또한 교차 브라우저 호환이 되어야 합니다.

단순하게 사용element.matches(':hover')제게 잘 맞는 것 같습니다. 오래된 브라우저에도 포괄적인 폴리필을 사용할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

querySelector for IE>=8:

const isHover = e => e.parentElement.querySelector(':hover') === e;    

const myDiv = document.getElementById('mydiv');
document.addEventListener('mousemove', function checkHover() {
  const hovered = isHover(myDiv);
  if (hovered !== checkHover.hovered) {
    console.log(hovered ? 'hovered' : 'not hovered');
    checkHover.hovered = hovered;
  }
});
.whyToCheckMe {position: absolute;left: 100px;top: 50px;}
<div id="mydiv">HoverMe
  <div class="whyToCheckMe">Do I need to be checked too?</div>
</div>

뒤로 물러나는 것은 괜찮다고 생각합니다 @Kolink 답변.

먼저 어떤 요소가 이동하는지 추적해야 합니다.한 가지 방법은 다음과 같습니다.

(function() {
    var matchfunc = null, prefixes = ["","ms","moz","webkit","o"], i, m;
    for(i=0; i<prefixes.length; i++) {
        m = prefixes[i]+(prefixes[i] ? "Matches" : "matches");
        if( document.documentElement[m]) {matchfunc = m; break;}
        m += "Selector";
        if( document.documentElement[m]) {matchfunc = m; break;}
    }
    if( matchfunc) window.isHover = function(elem) {return elem[matchfunc](":hover");};
    else {
        window.onmouseover = function(e) {
            e = e || window.event;
            var t = e.srcElement || e.target;
            while(t) {
                t.hovering = true;
                t = t.parentNode;
            }
        };
        window.onmouseout = function(e) {
            e = e || window.event;
            var t = e.srcElement || e.target;
            while(t) {
                t.hovering = false;
                t = t.parentNode;
            }
        };
        window.isHover = function(elem) {return elem.hovering;};
   }
})();

요소가 덮여 있는지 확인하는 한 가지 방법은 CSS에서 사용되지 않는 속성을 설정하는 것이라는 생각이 들었습니다.:hoverjavascript에 해당 속성이 있는지 확인합니다.돔 native 호버 속성을 사용하지 않기 때문에 문제에 대한 적절한 해결책은 아니지만, 제가 생각할 수 있는 가장 가깝고 최소의 해결책입니다.

<html>
    <head>
        <style type="text/css">
#hover_el
{   
    border: 0px solid blue;
    height: 100px;
    width: 100px;
    background-color: blue;
}   
#hover_el:hover
{   
    border: 0px dashed blue;
}
        </style>
        <script type='text/javascript'>
window.onload = function() {check_for_hover()};
function check_for_hover() {
    var hover_element = document.getElementById('hover_el');
    var hover_status = (getStyle(hover_element, 'border-style') === 'dashed') ? true : false;
    document.getElementById('display').innerHTML = 'you are' + (hover_status ? '' : ' not') + ' hovering';
    setTimeout(check_for_hover, 1000);
};
function getStyle(oElm, strCssRule) {
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle) {
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle) {
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
};
        </script>
    </head>
    <body>
        <div id='hover_el'>hover here</div>
        <div id='display'></div>
    </body>
</html>

(함수)getStyleJavaScript get Styles) 덕분에

깃발로 사용하기에 더 나은 CSS 속성을 생각할 수 있는 사람이 있다면,solid/dashed저에게 알려주세요. 가급적이면 그 부동산은 거의 사용되지 않고 상속받을 수 없는 것이 좋을 것 같습니다.

편집: CSS 변수는 아마도 이를 확인하는 데 사용하는 것이 더 나을 것입니다.예.

const fps = 60;

setInterval(function() {
  if(getComputedStyle(document.getElementById('my-div')).getPropertyValue('--hovered') == 1) {
    document.getElementById('result').innerHTML = 'Yes';
  } else {
    document.getElementById('result').innerHTML = 'No';
  };
}, 1000 / fps);
#my-div {
  --hovered:0;
  color: black;
}

#my-div:hover {
  --hovered:1;
  color: red;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Detect if div is hovered with JS, using CSS variables</title>
  </head>
  <body>
    <div id="my-div">Am I hovered?</div>
    <div id="result"></div>
  </body>
</html>

사용할 수 있습니다.if가 있는 진술.querySelector. 선택기 끝에 ":hover"를 추가하면 요소가 호버 중인 경우에만 요소가 반환됩니다.즉, null을 반환하는지 여부를 테스트할 수 있습니다.그것은 마치.element.matches(":hover)위의 해결책이지만, 이 버전으로 더 많은 성공을 거두었습니다.

다음은 예입니다.

if (document.querySelector("body > p:hover") != null) {
    console.log("hovered");
}

이 코드를 간격에 두고 호버링할 때마다 코드를 실행할 수 있습니다.

setInterval(() => {
    if (document.querySelector("body > p:hover") != null) {
        console.log("hovered");
    }
}, 10);
var mytext = document.getElementById("myId");
if(myval.matches(":hover")) {
    //has hover
} else {
   //no hover
}

if(myval.parentNode.matches(":hover") { }을(를) 사용할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/14795099/pure-javascript-to-check-if-something-has-hover-without-setting-on-mouseover-ou

반응형