#javascript #css
#javascript #css
Вопрос:
У меня срабатывает событие click. Он отлично работает и делает то, что мне нужно. Вот в чем проблема
Природа виджета, который я создаю, заключается в том, что элементы стеков накладываются друг на друга с помощью position: absolute
Когда я нажимаю на один из этих сложенных элементов, запускается только одно событие, но я бы хотел, чтобы срабатывал каждый элемент, который находится под курсором мыши при нажатии. Есть ли способ сделать это?
Комментарии:
1. ваш обработчик щелчка подключается ко всем этим элементам стека или только к одному?
2. это класс view, каждая кнопка, которая визуализируется через класс, имеет свой собственный прослушиватель событий, который при нажатии начинает вращаться. Прямо сейчас запускается только одно событие elements, я хочу, чтобы все они запускали то, под что попадает моя мышь
3. события работают, мне просто нужно постоянно нажимать по мере поворота одного, я хотел бы иметь возможность нажимать, и если это происходит на нескольких, я хочу, чтобы они запускали все из них
4. Вы можете скрыть верхний элемент и получить координаты следующего абсолютного элемента с
document.elementFromPoint
, а затем повторить, а затем показать их в конце. Пожалуйста, проверьте демо на предмет идеи.5. похоже, это сработает. В итоге я просто нашел все els, которые находятся там, где находится мышь, и запустил щелчок вручную, я дам вам чек за это, спасибо!
Ответ №1:
Пожалуйста, проверьте демонстрацию или запустите фрагмент кода на всю страницу и щелкните по всем разделам, чтобы увидеть сообщение о результате.
ДЕМОНСТРАЦИЯ:
http://plnkr.co/edit/KRWvLmRhGbO200pFkOxL?p=preview
Что я здесь делаю, так это :
Скрыть верхний элемент
и
получите координату следующего абсолютного элемента с document.elementFromPoint
, а затем повторите.
Фрагмент стека:
jQuery(document).ready(function(){
$common = $("div.common").on('click.passThrough', function (e, ee) {
var $element = $(this).hide();
try {
if (!ee) $("#output").empty();
$("<div/>").append('You have clicked on: ' $element.text()).appendTo($("#output"));
ee = ee || {
pageX: e.pageX,
pageY: e.pageY
};
var next = document.elementFromPoint(ee.pageX, ee.pageY);
next = (next.nodeType == 3) ? next.parentNode : next //Opera
$(next).trigger('click.passThrough', ee);
} catch (err) {
console.log("click.passThrough failed: " err.message);
} finally {
$element.show();
}
});
$common.css({'backgroundColor':'rgba(0,0,0,0.2)'});
});
#output {
margin-bottom: 30px;
}
.common {
position: absolute;
height: 300px;
width: 300px;
padding: 3px;
border: 1px #000 solid;
}
.elem5 {
top: 150px;
left: 150px;
}
.elem4 {
top: 180px;
left: 180px;
}
.elem3 {
top: 210px;
left: 210px;
}
.elem2 {
top: 240px;
left: 240px;
}
.elem1 {
top: 270px;
left: 270px;
}
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<div id="output"></div>
<div class="common elem1">Top Most Element</div>
<div class="common elem2">Element 2</div>
<div class="common elem3">Element 3</div>
<div class="common elem4">Element 4</div>
<div class="common elem5">Bottom Element</div>
Предоставлено для источника:
Ответ №2:
Вы можете использовать свойство CustomEvent
фрагмент
//This function changes the color of all child divs
function changeColor(e) {
this.style.background = "red";
}
//this function is attached to the parent div which will send that click event to all divs
function trigger(e) {
//create an event
event = new CustomEvent('click');
//if the event originates from a child div
if (e.target.className == 'box')
//loop through all child div
for (var i = 0; i < all_box.length; i) {
//dispatch a click event to each child div
all_box[i].dispatchEvent(event);
}
}
document.getElementById('parent').addEventListener('click', trigger)
var all_box = document.getElementsByClassName('box');
for (var i = 0; i < all_box.length; i) {
all_box[i].addEventListener('click', changeColor)
}
.box {
padding: 10px;
display: inline-block;
border: solid black;
}
#parent {
border: solid black;
padding: 10px;
}
;
<div id="parent">
<div class="box" id="primary">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box3</div>
</div>