Panzoom: Panzoom oculta el evento de mousedown de los subelementos en la última versión de Chrome

Creado en 7 dic. 2016  ·  12Comentarios  ·  Fuente: timmywil/panzoom

Usé este increíble complemento con jquery.draggable para desplazar / acercar el diagrama con nodos que se pueden arrastrar,
pero después de la última actualización de Chrome, los nodos no se pueden arrastrar.

Poca investigación mostró que Chrome cambió algo con su evento de puntero,
así que ahora el complemento panzoom responde al evento de puntero del nodo secundario antes de que se active el evento de mousedown.
Panzoom suprime el evento pointerdown y, por alguna razón, no hay ningún evento de mousedown después de eso, por lo que el arrastre no comienza.

jquery.panzoom.js v3.2.2
jquery 3.1.0 o v1.11.3
jqueryui 1.12.0 o 1.10.3
Chrome 55.0.2883.75 (64 bits) Ubuntu 16.04

Aquí hay una demostración
http://codepen.io/yurigor/pen/yVjeGB

Agregué la opción 'ignoreChildrensEvents' para solucionar este problema
No estoy seguro de si debo hacer una solicitud de extracción con estos cambios.

Comentario más útil

¡Feliz de ayudar!
Cualquiera que también lo necesite, aquí hay un enlace directo:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , si desea fusionar mis cambios,
Empiezo a cargar en vivo por
grunt watch:dev
pero no funciona.
En http: // localhost : 35711 / tengo
{"tinylr":"Welcome","version":"0.2.1"}
y en
http: // localhost : 35711 / test / index.html
o
http: // localhost : 35711 / demo / index.html
yo tengo
{"error":"not_found","reason":"no such route"}

Todos 12 comentarios

Tengo el mismo problema, chrome v55. Tengo una ventana que se puede arrastrar y quiero obtener eventos de mousedown para niños. ¿Qué hiciste para solucionar esto? tienes una rama con el cambio, estoy atascado por ahora.

encontré su rama y soluciona mi problema muy, muy bien. Gracias YuriGor esto es maravilloso

¡Feliz de ayudar!
Cualquiera que también lo necesite, aquí hay un enlace directo:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , si desea fusionar mis cambios,
Empiezo a cargar en vivo por
grunt watch:dev
pero no funciona.
En http: // localhost : 35711 / tengo
{"tinylr":"Welcome","version":"0.2.1"}
y en
http: // localhost : 35711 / test / index.html
o
http: // localhost : 35711 / demo / index.html
yo tengo
{"error":"not_found","reason":"no such route"}

Muchas gracias. esta solución no fue suficiente para mí, pero agregué algunas para arreglarlo en mi caso. (Tengo varios hijos anidados, algunos de ellos deben ignorarse y otros no)

@timmywil ¿Es posible lanzar una nueva versión con esta opción?

Editar: En realidad, tengo el mismo problema que romi45. 😞

Edición 2: una opción para enumerar qué elementos ignorar sería útil, como:

ignoreChildEventsFrom: [".things-to-ignore1", ".things-to-ignore2"]

Edición 3: Creo que he encontrado la solución en las preguntas frecuentes "¿Cómo hago que los enlaces funcionen si están dentro de un elemento Panzoom?".

lo que hago es comentar el preventDefault en la línea 969. preventDefault bloqueará el evento para que no llegue a sus hijos.

@akhnaz ,

Según tengo entendido, preventDefault evitará la acción predeterminada asociada con un elemento (un elemento secundario o panzoom en sí), y stopPropagation evitará que los eventos se propaguen a un elemento principal.

Hay una solución simple y elegante en las preguntas frecuentes:


  1. ¿Cómo hago que los enlaces funcionen si están dentro de un elemento Panzoom? ejemplo
  • La propagación de eventos se detiene para eventos de mousedown y touchstart para permitir elementos Panzoom dentro de elementos Panzoom. Para corregir los enlaces, vincule un controlador de eventos que evite que el evento llegue al controlador de Panzoom:
$('.panzoom a').on('mousedown touchstart', function( e ) {
  e.stopImmediatePropagation();
});

Esto no requiere cambios en la propia biblioteca.

Hola @ glen-84

Sí, preventDefault evitará la acción predeterminada. Pero también evitará mouseDown del niño cuando pointerDown está siendo enviado y escuchado.

En Chrome 55, pointerDown ahora se distribuye y Microsoft Edge ya está implementado pointerDown desde el principio.

En mi caso, panzoom se escucha en pointerDown, y los niños se escuchan en mouseDown.

Aquí está mi jsbin para ello:

https://jsbin.com/yozotuxina/edit?js

@akhnaz ,

Puede simplemente escuchar pointerdown en el niño y detener la propagación inmediata ...

https://jsbin.com/sicapuledo/edit?html , js, consola, salida

Hola,

Mejoré un poco tu función. Anulo su opción a una posible matriz de clases. El objetivo es solo ignorar los eventos si los niños tienen una de las clases enumeradas. Por supuesto, simplemente establezca el valor en el trabajo real a medida que lo implementó.

Realmente no tengo tiempo para bifurcar correctamente y hacer una solicitud de extracción. Incluya esa pequeña mejora y solicite una extracción en el repositorio principal.

Aquí está el código actualizado de sus líneas de bifurcación 959:

if (!options.disablePan || !options.disableZoom) {
    events[ str_start ] = function(e) {
        if(options.ignoreChildrensEvents) {
            if($.isArray(options.ignoreChildrensEvents)) {
                if(options.ignoreChildrensEvents.find(function(c){return $(e.target).hasClass(c);})) {
                    return;
                }
            }
            else if(e.target !== this){
                return;
            }
        }

        var touches;
                /* rest of code */

La opción ignoreChildrensEvents se puede definir como verdadero, falso o ['child-class1', 'child-class2'].

Saludos

por favor, lance una versión más reciente que contenga ignoreChildrensEvents

¿Fue útil esta página
0 / 5 - 0 calificaciones