Mouseleave, вызванный щелчком

Ответ 1

Кажется, это ошибка (я могу воспроизвести ее в Chrome с кликами, которые имеют мышь вниз и мышь быстро происходит друг за другом).

Я бы предложил обойти эту проблему, проверив, находится ли мышь по всему элементу в момент запуска события:

tooltip.onmouseleave = (e) => {
    if (tooltip === document.elementFromPoint(e.clientX, e.clientY)) {
        console.log('false positive');
        return;
    }
    console.log('tooltip mouse OUT')
}

Недостатком является то, что когда окно браузера теряет фокус, это также считается ложным. Если это проблема для вас, то выберите этот ответ.

Ответ 2

Ранее я просматривал ответы и комментарии, но недавно нашел способ проверить, было ли ошибочно запущено событие mouseleave

Я добавил чек в мой обработчик mouseleave:

private handleMouseLeave(event: MouseEvent) {
    if(event.relatedTarget || event.toElement){
        // do whatever
    }
    // otherwise ignore
}

Из моего тестирования в Chrome v64 оба этих значения будут null всякий раз, когда быстрый щелчок вызывает событие mouseleave. relatedTarget предназначен для более старой совместимости с браузером

Примечание. Оба эти значения также будут null, если мышь покинет элемент target и войдет в браузер (например, вкладки, меню и т.д.) или покинет окно браузера. Для моих целей это не было проблемой, так как это скользящее меню, с которым я работаю, и оставить окно браузера не должно закрывать меню в моем конкретном случае.

Примечание: последняя версия Firefox (февраль 2018), кажется, запускает mouseleave при каждом нажатии моего меню! Придется заглянуть в него

Ответ 3

Я также столкнулся с этой ошибкой. В моем случае я добавил флажки, завернутые в список, и завернул список в div. Я также использовал некоторые элементы списка, которые были тегами <hr>. Если вы быстро нажмете флажки и метки, вы иногда запускаете событие mouseleave на обертке div. Это не должно происходить, так как все щелкнутые элементы являются дочерними элементами div.wrapper.

...
  wrapper.addEventListener(
    'mouseleave',
    (e) => {
      logger('mouseleave fired');
      console.log('mouseleave fired', e);
    },
    false
  );
...

jsfiddle demo

Здесь gif воспроизведения. Нажмите внутри области подсказки (предоставленной с некоторой интенсивностью и движением), щелкните события из метки и окна ввода, и вы увидите, что два события mouseleave срабатывают по ошибке, а затем третий, когда мышь действительно покидает синюю область.

Ответ 4

Ответ @trincot для меня почти сработал. В моем случае я имею дело с поповерами. Когда я нажимаю на кнопку, она запускает всплывающее окно, отображаемое поверх кнопки запуска. Поэтому document.elementFromPoint(e.clientX, e.clientY) возвращает элемент popover, а не кнопку запуска. Вот как я решил это:

mouseleave(ev: MouseEvent) {
    const trigger: HTMLElement = document.getElementById('#myTrigger');
    const triggerRect = trigger.getBoundingClientRect();
    const falsePositive = isWithingARect(ev.clientX, ev.clientY, triggerRect);

    if (!falsePositive) {
        // do what needs to be done
    }
}

function isWithingARect(x: number, y: number, rect: ClientRect) {
  const xIsWithin = x > rect.left && x < rect.right;
  const yIsWithin = y > rect.top && y < rect.bottom;
  return xIsWithin && yIsWithin;
}

Ответ 5

var trackmouseup = null;

$('.box').mouseup(function(event){
    if(trackmouseup){
        clearTimeout(trackmouseup);
    }
    trackmouseup = setTimeout(function(){
        trackmouseup = null;
    }, 2); //it must be 2ms or more

});


$('.box').mouseleave(function(event){
    //if this event is triggered by click, there must be a mouse up event triggered 2ms ago
    if(trackmouseup){
        return;
    }

    //to do something
});