Question

I’ve been looking everywhere and I can’t seem to find a reliable mouseenter event.

The closest I found was: 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;
}

The only issue is that when i run it:

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

I get 40-47ish (different every time) executions at once each time the listener fires.

I tried the Quirksmode one too: 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
}

However this one was extremely unreliable and not only that, it assumed the parent/element was a DIV. This has to be more dynamic. This is for a library/script so I can’t include jQuery.

In short, I have an element that is hidden until the mouse moves. Once it moves it appears for as long as the mouse is moving OR if the mouse is hovering over the element itself. Less code would be awesome simply because only WebKit doesn’t support mouseenter natively and it feels like a waste to have that huge chunk of code from the first example just to support Chrome for a small UI thing.

Answer 1

Is it possible to just scrap the mouseenter and instead use mousemove instead? That takes care of showing it when the mouse is moving. To make it stay visible when hovered directly on the element, just use CSS instead.

#your_element {
    display: none;
}

#your_element:hover {
    display: block;
}