Пользовательская функция "mouseenter" не срабатывает - PullRequest
Новая
       5

Пользовательская функция "mouseenter" не срабатывает

0 голосов
/ 07 августа 2011

Вот JSFiddle.

Я пытаюсь заставить mouseenter работать на Chrome, Firefox и т. Д., Используя следующую функцию: 

var addMouseenter = (function () {
    var contains = function (parent, elem) {
            return parent.contains ? parent.contains(elem) :
                !!(parent.compareDocumentPosition(elem) & 16);
        },
        wrap = function (elem, method) {
            return function (e) {
                if (elem === e.target && !contains(elem, e.relatedTarget)) {
                    method.call(elem, e);
                }
            };
        };

    return function (elem, listener) {
        var listener2 = wrap(elem, listener);
        elem.addEventListener('mouseover', listener2, false);
    };
}());

Все работало нормально, пока я не столкнулся с этой конкретной ситуацией:

  • Элемент A имеет один из этих пользовательских mouseenter слушателей
  • Элемент A содержит Элемент B
  • Элемент Bпрямо против края Элемента A
  • Вы вводите Элемент A на том же краю

Я ожидал, что событие mouseover будет запущено на Элементе B и всплыветк элементу А. Однако, похоже, это не так.Я тестировал с Chrome 13 и Firefox 3.6 и получил тот же результат.Я что-то напутал?

Ответы [ 2 ]

2 голосов
/ 07 августа 2011

Если вы не против использования jQuery: 

$(document).ready(function() {
    $('#first').mouseover(function (e) {
        if ($(e.target).attr('id') != 'second') {
            alert('hello');
        }
    });
});

Попробовал это в вашем JSFiddle, и это работает: когда вы входите в зеленый квадрат, он не срабатывает; когда вы входите на красный квадрат снаружи, он горит; когда вы входите в красный квадрат с зеленого квадрата, он срабатывает. Это то, что ты хотел, верно?

новый JSFiddle

Или сохраняя свой подход к JavaScript: 

// Misc set-up stuff
var greet = function () { alert('Hi, my name is "' + this.id + '."'); },
    first = document.getElementById('first'),
    second = document.getElementById('second');

// The Actual Function
var addMouseenter = (function () {
    var contains = function (parent, elem) {
            return parent.contains ? parent.contains(elem) :
                !!(parent.compareDocumentPosition(elem) & 16);
        },
        wrap = function (elem, method) {
            return function (e) {
                //if (elem === e.target && !contains(elem, e.relatedTarget)) {
                if (elem === e.target && (e.target != second)) {
                    method.call(elem, e);
                }
            };
        };

    return function (elem, listener) {
        var listener2 = wrap(elem, listener);
        elem.addEventListener('mouseover', listener2, false);
    };
}());

// GOGOGO
addMouseenter(first, greet);

http://jsfiddle.net/AUc88/

0 голосов
/ 02 сентября 2011

Причина, по которой моя пользовательская функция не срабатывает, заключается в том, что она не работает.

Я обновил скрипку , показывая, что все в порядке.

Моя ошибка состояла только в том, чтобы проверить, было ли e.target таким же, как элемент, к которому я прикрепил слушателя.Мне нужно было проверить, были ли они одинаковыми или , если e.target был дочерним элемента.

Когда вы наведите курсор мыши на два квадрата действительнобыстро он регистрирует только событие mouseover на внутреннем, а поскольку мой слушатель был подключен к внешнему, тест elem === e.target не удался.

Поэтому я изменил код if вwrap функция к этому: 

if ((elem === e.target || contains(elem, e.target)) &&
    !contains(elem, e.relatedTarget)) {
        e.stopPropagation();
        method.call(elem, e);
}
...