Estoy tratando de desplazar el mouse dentro de un cuadrado, pero cuando hago clic en sus elementos secundarios, el desplazamiento cambia, ahora devuelve el desplazamiento del mouse dentro de los elementos secundarios, y no en el principal.
Lo que me gustaría lograr es desplazar el mouse dentro del padre, incluso si hago clic dentro de los hijos. ¡Muchas gracias!
A continuación se muestra un ejemplo del problema. (Mira en la consola)
$("#parent").click(function(e){ console.log(e.offsetX, e.offsetY) }); .square{ position: relative; height: 200px; width: 200px; background-color: red; } .small{ position: absolute; top: 25px; right: 25px; height: 50px; width: 50px; background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="square" id="parent"> <div class="square small"></div> </div>Puedes usar
e.target para que se haga clic en el elemento, ya que this es el elemento principal en el que ha surgido el clic.
Luego combine con .getBoundingClientRect() para obtener su posición, da:
$("#parent").click(function(e) { var rect = e.target.getBoundingClientRect(); //console.log(e.offsetX, e.offsetY) //console.log(rect.left, rect.top) console.log(rect.left + e.offsetX, rect.top + e.offsetY) }); .square { position: relative; height: 200px; width: 200px; background-color: red; } .small { position: absolute; top: 25px; right: 25px; height: 50px; width: 50px; background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="square" id="parent"> <div class="square small"></div> </div>Adición pointer-events: none; al css para la clase "pequeño" deshabilita hacer clic en el elemento.
$("#parent").click(function(e){ console.log(e.offsetX, e.offsetY) }); .square{ position: relative; height: 200px; width: 200px; background-color: red; } .small{ position: absolute; top: 25px; right: 25px; height: 50px; width: 50px; background-color: blue; pointer-events: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="square" id="parent"> <div class="square small"></div> </div> Agregue un fondo transparente y un div secundario de altura y ancho completos al padre ( #parent-overlay ) y verifique su desplazamiento en su lugar.
Las compensaciones se obtienen del evento de clic y el evento de clic estaba en el niño. Entonces, mientras está en el niño, no puede obtener una compensación del padre (el evento se registró en el niño).
Agregar una superposición de ancho y alto completo, que coincida con el padre, y compensar desde allí debería darle lo que desea.
$("#parent-overlay").click(function(e) { console.log(e.offsetX, e.offsetY); }); .square{ position: relative; height: 200px; width: 200px; background-color: red; } .small{ position: absolute; top: 25px; right: 25px; height: 50px; width: 50px; background-color: blue; z-index: 1; } #parent-overlay { position: absolute; z-index: 3; top: 0; left: 0; bottom: 0; right: 0; background-color: transparent; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="square" id="parent"> <div id="parent-overlay"></div> <div class="square small"></div> </div>