Как пробросить клик через элемент в javascript?

Question

[Paul_Morte]

На странице есть элемент div 1. Внутри него с абсолютным позиционированием расположены элементы div 2.

Как сделать так, чтобы можно было отключить событие mousedown по элементу div 2 , т.е. сделать его "прозрачным для mousedown", но оставить на нем такие события, как mouseenter - событие наведения мышки на элемент.

pointer-events:none - отменяет любые события мышки
Проверять координаты и т.п. решения - не подходят

Comments

[Kovalsky]

Сделайте просто mousemove на div1 и проверяйте находится ли внутри div2

[Paul_Morte]

Дело в том, что div 2 перекрывает верхним слоем div 1 и нажатие на нижний слой не проходит.
pointer-events: none - повторюсь, не вариант. Нужно чтобы mouseenter работало на div 2

Answer 1

[WapSter]

Как сделать так, чтобы можно было отключить событие mousedown по элементу div 2 , т.е. сделать его "прозрачным для mousedown"

так прозрачным или все же, что бы событие не происходило?

Comments

[Paul_Morte]

<div class="list">
  <div class="div2" style='position:absolute'></div>
  <div class="div1"></div>
</div>

Человек может рисовать квадраты на заднем фоне div 1. А div 2 я хочу сделать, что-то по типу "Якорных точек" - жесткая привязка, откуда будет начало рисования квадрата.

div 2 лежит верхним слоем и перекрывает все события

Чтобы div 2 не перекрывал mousedown на нижний слой div 1, я хочу как-то физически отрубить от него событие нажатия мышки (чтобы нажатие было сквозь него на div 1), но в то же время я бы хотел, чтобы события наведения мышки mouseenter отрабатывались ))

[WapSter]

Paul_Morte, оно и так сейчас сквозь него. По другому не добиться, по моему.

[Paul_Morte]

WapSter, Отредактировал ответ немного. Перекрытие есть и код добавил.

[Paul_Morte]

WapSter, Я думаю тут ответ ближе к такому коду, только наверное более техничному.

$('body').on('mouseenter','.div2',function(e){
 $(this).addClass('pen'); // css     .pen{pointer-events:none;}
});
$('body').on('mouseleave','.div2',function(e){
 $('.div2').removeClass('pen'); 
});

[WapSter]

Paul_Morte, я просто не понимаю, что хочешь, mousedown сейчас проходит на сквозь квадратов, mouseenter и leave работает на квадратах. С html кода и надо было начинать вопрос. Извини, но ты какой-то проблемный, так что бери, то что есть, либо решай свою проблему дальше.

[Paul_Morte]

WapSter, ок

Answer 2

[Paul_Morte]

Решение как перебросить mousedown ( или click ) через наложенный сверху слой

<div class="container">
  <div class="div2" style='position:absolute'></div>
  <div class="div1"></div>
</div>

.div2 - полностью нахожен на .div1 и засасывает все события на себя.
Делаем проброс:

$('.div2').mousedown(function(e){
  evt = e || window.event;
  $(this).hide(0);  // при нажатии на .div2 скрываем его
  starter = document.elementFromPoint(evt.clientX, evt.clientY); // получаем элемент снизу - .div1
  $(starter).mousedown();  // эмулируем нажатие на кнопку мыши
  $(this).show(0); // показываем .div2
});

Answer 3

[Дмитрий Мединский]

Не дам готовый ответ так как лень печатать с телефона. Изучи тему всплытия/погружения в событиях дом. Если div1 есть родителем для div2 можешь воспользоваться closest. Далее Гугл в помощь...