jQuery отправляет события мыши по оси Z

Question

Можно ли отправить мышиный зонд по оси z? Например, элемент был абсолютно позиционирован на сайте над другим элементом. Мне бы хотелось, чтобы элемент ниже вызывал событие mouseover, даже если другой блокирует его, и хотя они совершенно не связаны (никаких отношений между родителями, детьми и братьями и сестрами).

Это может произойти с большим количеством элементов на сайте, который я создаю, и я хотел бы использовать общий подход к проблеме, не прибегая к дополнительным функциям JS для каждого отдельного элемента, который может случиться. .

Answer 1

Первый подход

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

$('#thingOnTop').mouseenter(function(){
  $('#thingUnderneath').mouseenter();
});

Это решение не отвечает вашим требованиям наличия общегорешение для всех элементов, где эта проблема может возникнуть.Это также будет не совсем точно, если предмет сверху не будет точно такого же положения и размеров, как предмет внизу.

Второй подход

Используйте указатель-события CSS свойство.Это позволит событиям мыши проходить через вещи, но это не поддерживается в старых браузерах:

.thingsOnTop{
    pointer-events: none;
}

Также обратите внимание, что это сделает верхнюю вещь никогда цельюсобытие мыши, а не в первом решении, где оно будет вызывать обработчик для вещи сверху и снизу.

Четвертый подход Джошнаро (разработанный)

Я был только в процесседобавить еще один подход, когда Джош опередил меня.По его словам, вы можете прослушать событие в верхнем элементе, а затем программно выяснить, какие другие элементы находятся под этим элементом для координат X и Y события.

HTML:

<div class="thingThatCouldBeOnTop"></div>
<div class="thingThatCouldBeUnderneath"></div>

JS:

$('.thingThatCouldBeOnTop').mouseenter(function(e){
    $('.thingThatCouldBeUnderneath').filter(function(){
        $this = $(this);
        var offset = $this.offset();
        var height = $this.outerHeight();
        var width = $this.outerWidth();
        return offset.top < e.pageY
            && offset.left < e.pageX
            && (height + offset.top) > e.pageY
            && (width + offset.left) > e.pageX;
    }).mouseenter();
});

$('.thingThatCouldBeUnderneath').mouseenter(function(){
    alert('do something more useful');
});

Обратите внимание: Это ужасно неэффективно.Сокращение набора искомых элементов до элементов с данным классом несколько помогает (т. Е. Сделать $('.thingThatCouldBeUnderneath'), а не $('*')), но это означает, что вам нужно добавить этот класс к каждому элементу, который может быть ниже другого, который вы хотите обработать мышьюсобытия для.Я полагаю, что именно расчеты измерений вызывают большую часть задержки.Со многими потенциально «нижними» элементами на странице это может быть слишком медленным.

Вот рабочий пример .

Answer 2

Я не думаю, что вы найдете относительно простое решение, которое полностью удовлетворит ваши потребности, если, возможно, упомянутый Spycho трюк с указателями-событиями не приведет вас туда. Однако есть несколько более изящных, несколько глобальных подходов, которые вы можете использовать:

Третий подход

Создайте имитирующий элемент, который находится в той же позиции, что и событие мыши, требующее возврата элемента, за исключением видимости «скрытого» и более высокого z-индекса. Пусть его события мыши будут переданы в имитируемый элемент.

Четвертый подход

1. Получить событие мыши относительно окна
2. Итерация по каждому объекту, чтобы определить, к какому элементу вы хотите применить событие
3. Выполнить действие