0
104
ViewsjQuery stopPropagation no deja de hacer clic
Tengo un complemento panzoom que funciona bien. Cuando hago clic en var elem , agrega un pequeño div cp_select en la ubicación correcta. Luego, cuando hago clic en ese div cp_select recién creado, elimina ese div. Entonces puede agregarlo y eliminarlo en consecuencia. Sin embargo, cuando hago clic en cp_select div, lo elimina y luego lo vuelve a agregar inmediatamente porque el clic se propaga. Probé event.stopPropagation() y event.stopImmediatePropagation() sin suerte. ¿Alguna idea de cómo evitar que cp_select dispare map_click(e) ?
window.panzoom = panzoom(elem, { onClick(e) { map_click(e); } }) function map_click(e) { $(".map_cont").prepend('<div class="cp_select" style="left:'+calc_x+'px ;top:'+calc_y+'px"></div>'); } $('body').on('click', '.cp_select', function(event) { event.stopImmediatePropagation() $(this).remove() return false; });2 answers
Answer question0
El problema debe ser específicamente con la forma en que panzoom se ocupa de su onClick, o de lo contrario, en el código que no se muestra en la pregunta; si sustituyo un controlador de eventos de clic simple en la ventana en lugar de su llamada panzoom, event.stopPropagation() funciona como se esperaba.
// nonessential code removed and simplified for demo function map_click() { $(".map_cont").prepend('<div class="cp_select"></div>'); } $('body').on('click', '.cp_select', function(event) { $(this).remove(); event.stopPropagation(); }); window.onclick = map_click // stand-in for your panzoom function .cp_select { border: 3px solid; height: 20px; width: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> (click anywhere) <div class="map_cont"></div>0
¿Por qué no simplemente alternar una clase de visibilidad del elemento cp_select en el que se hizo clic?
// adjust values of below variables let rowCount = 10; let colCount = 10; let tileSize = 50; let mapCont = $(".map_cont"); // if this is a single item, consider using an id instead of a class // start with adding hidden .cp_select items on all tiles for (let i = 0; i < rowCount; i++) { for (let j = 0; j < colCount; j++) { let top = i * tileSize; let left = j * tileSize; let tile = `<div class="cp_select hide" style="top:${top}px ;left:${left}px"></div>`; mapCont.prepend(tile); } } $(document).on('click', '.cp_select', function(event) { $(this).toggleClass("hide"); });Y agregue la siguiente regla css
.hide { display: none; }