Tengo un div llamado cuadro de inicio que, cuando se hace clic, se supone que crea dinámicamente 2 divs. Agregué un detector de eventos al padre del div de la caja de inicio para escuchar cualquier evento de los 2 divs creados dinámicamente.
El problema es que el detector de eventos de clic entra en conflicto con el detector de eventos mousedown que impide que se ejecute (el evento de clic).
document.addEventListener('DOMContentLoaded', function () { var container = document.querySelector("#container"); var target; var elementCreated = false; var elements = []; container.addEventListener("click", (ev) => { target = ev.target; if (target.className != "box" && target.id != "container") { if (elementCreated == false) { createElements(target); } else if (elementCreated == true) { removeElementsByClass("box"); elements = []; } } }); container.addEventListener("mousedown", (ev) => { target = ev.target; alert("MouseDown on: " + target.id); }); container.addEventListener("mouseup", (ev) => { target = ev.target; alert("MouseUp on: " + target.id); }); function createElements(target) { const dimensions = target.getBoundingClientRect(); const element1 = document.createElement('div'); element1.className = "box"; element1.id = "box1"; element1.style.left = (dimensions.left) + "px"; element1.style.top = dimensions.bottom + 25 + "px"; container.appendChild(element1); const element2 = document.createElement('div'); element2.className = "box"; element2.id = "box2"; element2.style.left = (dimensions.left) + "px"; element2.style.top = dimensions.bottom + 90 + "px"; container.appendChild(element2); } }); #container { width: 600px; height: 400px; background-color: blue } #starter-box { position: relative; top: 50px; left: 25px; width: 50px; height: 50px; background-color: red } .box { position: absolute; width: 50px; height: 50px; background-color: black } <div id="container"> <div id="starter-box"> </div> </div>Verifique los campos del objeto de evento (argumento ev para la devolución de llamada del oyente).
Puedes usarlo tu lógica.
Descubra el objeto de evento, intente con console.log(ev) y vea. Hay más diferencias.