javascript tinh khiết để kiểm tra xem một cái gì đó có di chuột (không thiết lập trên mouseover ra/vào)

Tôi đã thấy cú pháp này jQuery:javascript tinh khiết để kiểm tra xem một cái gì đó có di chuột (không thiết lập trên mouseover ra/vào)

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

Kể từ khi tôi không sử dụng jQuery, tôi đang tìm cách tốt nhất để làm điều này trong javascript thuần túy.

Tôi biết tôi có thể giữ biến toàn cầu và đặt/bỏ đặt biến này bằng cách sử dụng mouseover và mouseout, nhưng tôi tự hỏi liệu có cách nào đó để kiểm tra thuộc tính gốc của phần tử thông qua DOM thay thế không? Có thể một cái gì đó như thế này:

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

Ngoài ra, nó phải tương thích với trình duyệt chéo.

Nguồn

2013-02-10 mulllhausen

Tôi đã dành 20 phút tìm kiếm một cách để tìm trạng thái này. Tôi nghi ngờ bạn có thể chỉ cần thiết lập một sự thích hợp hoặc dữ liệu trên phần tử như lơ lửng hoặc không di chuột qua và di chuột qua, đó là khả năng điều đầu tiên bạn và bất kỳ ai trong chúng ta đọc điều này đã nghĩ. – Popnoodles

Kiểm tra [mã nguồn jQuery] (http://code.jquery.com/jquery-latest.js). Tôi nghĩ rằng họ đang sử dụng 'mouseover' và' mouseout' để di chuột. – Antony

@Antony: Tôi không thấy nó được giới thiệu ở bất kỳ nơi nào khác, vì vậy có khả năng 'fn.hover' không liên quan gì đến bộ chọn': hover'. Tôi có thể đã sai. – nhahtdh

Trước tiên, bạn cần phải theo dõi các yếu tố nào đang được di chuột lên. Dưới đây là một cách để làm việc đó:

(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;}; 
    } 
})();

Nguồn

2013-02-10 06:19:15

Vâng, Âm thanh thú vị với tôi :-) – Exception

Đã chỉnh sửa để thực hiện sử dụng hàm gốc 'match' (bao gồm tiền tố của nhà cung cấp) –

Tại sao câu trả lời này lại đúng? Câu hỏi yêu cầu không sử dụng di chuột qua? – Aaron

nó xảy ra với tôi rằng có một cách để kiểm tra xem một yếu tố đang được quét qua là để thiết lập một tài sản không sử dụng trong css :hover và sau đó kiểm tra nếu tài sản đó tồn tại trong javascript. nó không phải là một giải pháp thích hợp cho vấn đề vì nó không sử dụng một thuộc tính hover dom-native, nhưng nó là giải pháp gần nhất và tối thiểu nhất mà tôi có thể nghĩ đến.

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

(chức năng getStyle nhờ JavaScript get Styles)

nếu có ai có thể nghĩ đến một tài sản css tốt hơn để sử dụng như một lá cờ hơn solid/dashed xin vui lòng cho tôi biết. tốt nhất là tài sản sẽ hiếm khi được sử dụng và không thể được kế thừa.

Nguồn

2013-02-10 13:08:05 mulllhausen

Đó là một chút hacky, nhưng tôi chắc chắn như thế này nhất, như là khá hợp lý, đơn giản và miễn phí của lo lắng khả năng tương thích. –

Bạn có thể sử dụng querySelectorcho IE> = 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>

để dự phòng tôi nghĩ rằng đó là ok câu trả lời @Kolink.

Nguồn

2013-02-10 17:11:41

Tôi sẽ mở rộng này thành '!! (e.querySelector (": hover ") || e.parentNode.querySelector (": hover ") === e)' – megawac

@megawac vừa tạo một ví dụ tại sao tôi sẽ không –

@ zb Xin chào, tôi biết đây là một bài đăng cũ, nhưng nếu bạn vẫn còn ở đó, bạn có thể giải thích cho tôi mã của bạn không? đặc biệt là những dòng ** document.addEventListener ('mousemove', chức năng checkHover() {** và ** console.log (lơ lửng? 'Hovered': 'not hovered'); ** không bao giờ thấy điều này trước khi không thậm chí còn biết nó hoạt động như thế nào – Luke

Đơn giản chỉ cần sử dụng element.matches(':hover') dường như làm việc tốt cho tôi, bạn có thể sử dụng một polyfill toàn diện cho trình duyệt cũ quá: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches

Nguồn

2017-10-27 10:00:45 Hugheth

Giải pháp tốt nhất. –

javascript tinh khiết để kiểm tra xem một cái gì đó có di chuột (không thiết lập trên mouseover ra/vào)

Trả lời

Các vấn đề liên quan