JQuery отправляет мышиные точки вниз по оси z

100
14

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


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

спросил(а) 2021-01-25T14:49:50+03:00 4 месяца, 4 недели назад
1
Решение
116

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


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


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

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


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


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


.thingsOnTop{
pointer-events: none;
}

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

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


Я просто собирался добавить еще один подход, когда Джош избил меня. По его словам, вы можете прослушивать событие на верхнем элементе, а затем программно выяснить, какие другие элементы находятся под этим элементом для координат события 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'), а не $('*')), но это означает, что вам нужно добавить этот класс к каждому элементу, который может быть под другим, который вы хотите обработать мышью события для. Я считаю, что именно расчет размеров вызывает большую часть задержки. Со многими потенциально "под" элементами на странице это может быть слишком медленным.


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

ответил(а) 2021-01-25T14:49:50+03:00 4 месяца, 4 недели назад
76

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


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


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

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


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

ответил(а) 2021-01-25T14:49:50+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема