(마우스 오버/아웃 설정 없이) 호버가 있는지 확인하는 순수한 자바스크립트
저는 다음과 같은 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에서 사용되지 않는 속성을 설정하는 것이라는 생각이 들었습니다.:hover
javascript에 해당 속성이 있는지 확인합니다.돔 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>
(함수)getStyle
JavaScript 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
'programing' 카테고리의 다른 글
연결 테스트를 위한 범용 SELECT 쿼리 (0) | 2023.10.30 |
---|---|
xsd:include와 xsd:import의 차이점은 무엇입니까? (0) | 2023.10.30 |
C에서 EOF 검출 (0) | 2023.10.30 |
UpdatePanel의 ListView의 LinkButton으로 인해 전체 포스트백 발생 (0) | 2023.10.30 |
Spring Boot 컨트롤러에서 이미지를 반환하고 파일 시스템처럼 사용하는 방법 (0) | 2023.10.30 |