web-dev-qa-db-ja.com

ホバーがあるかどうかを確認する純粋なJavaScript（マウスオーバー/アウトの設定なし）

私はこのjQuery構文を見ました：

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

私はjQueryを使用していないので、純粋なjavascriptでこれを行う最適な方法を探しています。

グローバル変数を保持し、mouseoverとmouseoutを使用して設定/設定解除できることは知っていますが、代わりにDOMを介して要素のネイティブプロパティを検査する方法があるかどうか疑問に思っていますか？たぶんこのようなもの：

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

また、クロスブラウザ互換である必要があります。

javascriptjqueryhover
42
mulllhausen

まず、どの要素がホバーされているかを追跡する必要があります。これを行う1つの方法を次に示します。

(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;};
   }
})();
6
Niet the Dark Absol

IEの場合 querySelector> = 8を使用できます

function isHover(e) {
    return (e.parentElement.querySelector(':hover') === e);
}

function isHover(e) {
  return (e.parentElement.querySelector(':hover') === e);
}


var myDiv = document.getElementById('mydiv');;
document.addEventListener('mousemove', function checkHover() {
  var 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の回答は大丈夫だと思います。

47
zb'

単にelement.matches(':hover')を使用するだけでうまくいくようで、古いブラウザにも包括的なポリフィルを使用できます。 https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

23
Hugheth

要素がホバーされているかどうかを確認する1つの方法は、css :hoverで未使用のプロパティを設定し、そのプロパティがjavascriptに存在するかどうかを確認することだと思いました。 dom-native hoverプロパティを使用していないため、問題に対する適切な解決策ではありませんが、私が考えることができる最も近い最小の解決策です。

<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>

（関数getStyleのおかげで JavaScript get Styles ）

誰かがsolid/dashedよりも良いフラグとして使用するcssプロパティを考えることができたら教えてください。プロパティはめったに使用されず、継承できないプロパティであることが望ましいです。

6
mulllhausen