Надежный «мышиный центр» без jQuery - PullRequest
Новая
       9

Надежный «мышиный центр» без jQuery

6 голосов
/ 19 декабря 2011

Я искал повсюду, и я не могу найти надежного события mouseenter.

Ближайшее, что я нашел, было: mouseenter без 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;
}

Единственная проблема заключается в том, что когда я его запускаю: 

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

Iполучить 40-47ish (разные каждый раз) выполнения одновременно каждый раз, когда слушатель срабатывает.

Я тоже попробовал Quirksmode: 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
}

Однако этот был крайне ненадежным и не только потому, что предполагал, что родитель / элемент был DIV.Это должно быть более динамичным.Это для библиотеки / скрипта, поэтому я не могу включить jQuery.

Короче говоря, у меня есть элемент, который скрыт, пока мышь не двигается.Как только он перемещается, он появляется в течение всего времени, пока мышь движется ИЛИ, если мышь находится над самим элементом.Меньше кода было бы замечательно просто потому, что только WebKit изначально не поддерживает mouseenter, и это кажется пустой тратой, чтобы получить этот огромный кусок кода из первого примера просто для поддержки Chrome для небольшого пользовательского интерфейса.

1 Ответ

3 голосов
/ 19 декабря 2011

Можно ли просто удалить mouseenter и вместо этого использовать mousemove? Это нужно, чтобы показать, когда мышь движется. Чтобы он оставался видимым при наведении непосредственно на элемент, просто используйте CSS. 

#your_element {
    display: none;
}

#your_element:hover {
    display: block;
}
...