6

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Oscar Godson
  • 31,662
  • 41
  • 121
  • 201
  • 1
    Why can't your library / script require jQuery? – SLaks Dec 18 '11 at 20:14
  • Given the hoops you're jumping through trying to get this to work - why not just use jQuery? You could at least pull out the relevant parts of the source code for `mouseenter` handling. – Matt Ball Dec 18 '11 at 20:16
  • 2
    Because it'd be like including MooTools to get jQuery to work... this is a fairly large Markdown editor library, so including another 30k of script to *just* run a mouseenter is ridiculous. – Oscar Godson Dec 18 '11 at 20:17
  • And I tried to pull out the parts, but the event system in jQuery is extremely modularized and I can't seem to piece together all the code correctly. – Oscar Godson Dec 18 '11 at 20:19

1 Answers1

3

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;
}
Nate B
  • 6,338
  • 25
  • 23