"mouseenter" đáng tin cậy mà không cần jQuery

Question

Tôi đã tìm kiếm ở khắp mọi nơi và dường như tôi không thể tìm thấy sự kiện đáng tin cậy mouseenter.

Gần nhất tôi tìm thấy là: mouseenter without JQuery

function contains(container, maybe) { 
    return container.contains ? container.contains(maybe) : !!(container.compareDocumentPosition(maybe) & 16); 
} 

var _addEvent = window.addEventListener ? function (elem, type, method) { 
    elem.addEventListener(type, method, false); 
} : function (elem, type, method) { 
    elem.attachEvent('on' + type, method); 
}; 

var _removeEvent = window.removeEventListener ? function (elem, type, method) { 
    elem.removeEventListener(type, method, false); 
} : function (elem, type, method) { 
    elem.detachEvent('on' + type, method); 
}; 

function _mouseEnterLeave(elem, type, method) { 
    var mouseEnter = type === 'mouseenter', 
     ie = mouseEnter ? 'fromElement' : 'toElement', 
     method2 = function (e) { 
      e = e || window.event; 
      var related = e.relatedTarget || e[ie]; 
      if ((elem === e.target || contains(elem, e.target)) && 
       !contains(elem, related)) { 
        method(); 
      } 
     }; 
    type = mouseEnter ? 'mouseover' : 'mouseout'; 
    _addEvent(elem, type, method2); 
    return method2; 
} 

Vấn đề duy nhất là khi tôi chạy nó:

_mouseEnterLeave(ele, 'mouseenter', function(){ 
    console.log('test'); 
}); 

tôi nhận được 40-47ish (khác nhau mỗi lần) hành quyết tại mỗi thời gian một lần người nghe bắn.

tôi đã cố gắng một Quirksmode quá: http://www.quirksmode.org/js/events_mouse.html#mouseenter

function doSomething(e) { 
    if (!e) var e = window.event; 
    var tg = (window.event) ? e.srcElement : e.target; 
    if (tg.nodeName != 'DIV') return; 
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; 
    while (reltg != tg && reltg.nodeName != 'BODY') 
     reltg= reltg.parentNode 
    if (reltg== tg) return; 
    // Mouseout took place when mouse actually left layer 
    // Handle event 
} 

Tuy nhiên cái này là cực kỳ đáng tin cậy và không chỉ có vậy, nó giả phụ huynh/yếu tố là một DIV. Điều này phải năng động hơn. Điều này là dành cho một thư viện/kịch bản vì vậy tôi không thể bao gồm jQuery.

Tóm lại, tôi có phần tử bị ẩn cho đến khi con chuột di chuyển. Một khi nó di chuyển nó xuất hiện miễn là con chuột đang di chuyển HOẶC nếu con chuột đang lơ lửng trên chính phần tử đó. Ít mã hơn sẽ đơn giản chỉ vì WebKit không hỗ trợ mouseenter một cách tự nhiên và cảm thấy như một sự lãng phí khi có một đoạn mã lớn từ ví dụ đầu tiên chỉ để hỗ trợ Chrome cho một giao diện người dùng nhỏ.

Answer 1

Có thể chỉ cần cắt mouseenter và thay vào đó hãy sử dụng mousemove thay thế? Điều đó sẽ chăm sóc hiển thị nó khi con chuột đang di chuyển. Để hiển thị trực tiếp khi di chuột trực tiếp trên phần tử, chỉ cần sử dụng CSS thay thế.

#your_element { 
    display: none; 
} 

#your_element:hover { 
    display: block; 
}