Tengo dos divs que se superponen con dos eventos de mouse. ¿Es posible capturar ambos eventos? Solo puedo capturar A o B, pero no A y B al mismo tiempo.
function adown() { console.log('A') } function bdown() { console.log('B') } #a { pointer-events: all; width: 200px; height: 200px; background: red; position: absolute; } #b { pointer-events: all; width: 200px; height: 200px; background: blue; position: absolute; opacity: 0.5; top: 50px; left: 50px; } <div id="a" onmousedown="adown()"></div> <div id="b" onmousedown="bdown()"></div>Como se menciona en los comentarios, puede usar document.elementsFromPoints(x,y) donde x e y son desde la posición del mouse en el evento onclick del documento. Luego, simplemente "filtre" los elementos envolviéndolos en un div , en este código con id canvas. Y, por último, solo console.log su id .
Como se puede ver en este fragmento:
document.addEventListener("click", function(){ let els = document.elementsFromPoint(event.clientX, event.clientY); els.forEach(function(el){ if(document.querySelector("#canvas").contains(el)){ console.log(el.id); } }); }); #A { pointer-events: all; width: 200px; height: 200px; background:red; position: absolute; } #B { pointer-events: all; width: 200px; height: 200px; background:blue; position: absolute; opacity: 0.5; top: 50px; left:50px; } <div id="canvas"> <div id="A"></div> <div id="B"></div> </div>Si usa document.elementsFromPoints de respuestas anteriores y usa un atributo para describir qué función desea llamar al hacer clic, podrá activar dos funciones con un solo clic.
const functions = { funcA: () => console.log('A'), funcB: () => console.log('B'), } document.addEventListener("click", e => { const elements = document.elementsFromPoint(e.clientX, e.clientY); elements.forEach(el => { if(document.querySelector("#container").contains(el)){ const functionAttribute = el.getAttribute('data-function'); if(functionAttribute && functionAttribute.length && functions[functionAttribute]){ functions[functionAttribute](); } } }); }); .elem { width: 200px; height: 200px; background-color: red; position: absolute; } <html> <body> <div id="container"> <div data-function="funcA" class="elem">A</div> <div data-function="funcB" class="elem">B</div> </div> </body> </html>O puede asignar ambos divs a la misma clase y luego iterar sobre ellos:
<div class="test"></div> <div class="test"></div> const testDivs = document.querySelectorAll('.test'); testDivs.forEach(testDiv => { testDiv.addEventListener('click', () => { // do something... }); });