Как инициировать событие щелчка мышью на нескольких элементах HTML, перекрывающих друг друга?

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

Я знаю, что вы можете использовать pointer-events: none;, чтобы ваш щелчок проходил через ваши элементы, но что, если я хочу инициировать событие щелчка мыши для элемента И событие щелчка мыши для произвольно многих других элементов под ним ?


html css pointer-events onmouseclick
person Magnus    schedule 15.07.2018    source источник
comment
Находятся ли элементы в одном и том же dom-узле? Если да, примените onClick к общему родителю. Если нет, вам придется отслеживать положение мыши и сравнивать его со всеми элементами. Далее вопрос. Вы хотите перейти по ссылке? Итак, если две кнопки пересекаются, и вы нажимаете одну, сработает ли та, что ниже, если бы той, на которую вы на самом деле нажали, тоже не было? Или только первый хит?   -  person SirPilan    schedule 15.07.2018
comment
Уточнение: в моем случае у меня есть svg с несколькими перекрывающимися элементами дочернего пути, которые определяют различные полигоны; все элементы пути являются братьями и сестрами друг друга - между ними не происходит вложения. Я хочу щелкнуть произвольный элемент пути, который, как правило, будет перекрывать один или несколько элементов пути родственного элемента и, таким образом, вызывать (в общем случае) любое событие мыши, которое было бы вызвано, если бы этот путь был единственным элементом. (Представьте, что вы нажимаете на формы Техаса и США, где я хочу заполнить две метки — Техас, США — одним щелчком мыши на Техасе.)   -  person Magnus    schedule 15.07.2018

Ответы (2)


arrow_upward
1
arrow_downward

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

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

<div id="topmost">
    <div id="second">
        <p id="firstp"></p>
    </div>
</div>

Предположим, вы используете jquery. Ниже показано, как вы будете прослушивать события кликов из всех элементов ниже div.id="topmost".

Поскольку нормальный поток событий предназначен для любого события щелчка (может быть любого другого типа события), которое запускается любым элементом с самым верхним элементом div, будет всплывать к самому внешнему элементу, я только перечисляю самое верхнее событие щелчка, а затем проверяю какой элемент вызвал это событие, проверив идентификатор целевого элемента. e.target будет фактическим элементом, по которому был выполнен щелчок. Вы можете либо переключить target.attr('id'), либо запустить его, если еще условия.

$(function () {
  $("#topmost").on("click", function (e) {
    e.preventDefault();
    var target = $(e.target);
    if(target.attr('id') === "idOfElement"){
       // code to handle the event
    }else{

});
person katwekibs    schedule 15.07.2018

arrow_upward
0
arrow_downward

Решением может быть отслеживание движения мыши с помощью:

$( document ).mousemove();

Сохраните координаты в глобальной переменной, а затем проверьте ее положение при нажатии на элемент. Это даст что-то вроде:

var mousePos = [0,0];
$( document ).mousemove(function( event ) {
    mousePos[0] = event.pageX
    mousePos[1] = event.pageY
});
$("#target").click(function(){
// Compare mouse coordinates and your items ones using offset, height and width
if(mousePos[0] > $('#target2').offset.left){
    // Do whatever you are willing to do
}
});
person Anthony    schedule 15.07.2018