Panzoom: Panzoom masque l'événement mousedown des sous-éléments sur le dernier Chrome

Créé le 7 déc. 2016  ·  12Commentaires  ·  Source: timmywil/panzoom

J'ai utilisé ce plugin génial avec jquery.draggable pour faire un panoramique/zoomer un diagramme avec des nœuds déplaçables,
mais après la dernière mise à jour de Chrome, les nœuds ne peuvent plus être déplacés.

Une petite enquête a montré que Chrome a changé quelque chose avec son événement pointeur vers le bas,
alors maintenant le plug-in panzoom répond à l'événement pointerdown du nœud enfant avant que l'événement mousedown ne soit déclenché.
Panzoom supprime l'événement pointerdown et pour une raison quelconque, il n'y a pas d'événement mousedown après cela, donc le déplacement ne démarre pas.

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

Voici une démo
http://codepen.io/yurigor/pen/yVjeGB

J'ai ajouté l'option 'ignoreChildrensEvents' pour résoudre ce problème
Je ne sais pas si je dois faire une demande de tirage avec ces modifications.

Commentaire le plus utile

Heureux d'aider!
Pour tous ceux qui en ont également besoin, voici un lien direct :
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , si vous souhaitez fusionner mes modifications, aidez-moi avec grunt s'il vous plaît.
Je commence livereload par
grunt watch:dev
mais ça ne marche pas.
Sur http://localhost :35711/ j'ai
{"tinylr":"Welcome","version":"0.2.1"}
et à
http://localhost :35711/test/index.html
ou
http://localhost :35711/demo/index.html
j'ai
{"error":"not_found","reason":"no such route"}

Tous les 12 commentaires

J'ai le même problème, chrome v55. J'ai une fenêtre déplaçable et je veux obtenir des événements mousedown pour les enfants. Qu'avez-vous fait pour résoudre ce problème ? avez-vous une branche avec le changement, je suis bloqué pour l'instant.

trouvé votre branche et cela résout mon problème très très bien. Merci YuriGor c'est merveilleux

Heureux d'aider!
Pour tous ceux qui en ont également besoin, voici un lien direct :
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , si vous souhaitez fusionner mes modifications, aidez-moi avec grunt s'il vous plaît.
Je commence livereload par
grunt watch:dev
mais ça ne marche pas.
Sur http://localhost :35711/ j'ai
{"tinylr":"Welcome","version":"0.2.1"}
et à
http://localhost :35711/test/index.html
ou
http://localhost :35711/demo/index.html
j'ai
{"error":"not_found","reason":"no such route"}

Merci beaucoup. ce correctif n'était pas suffisant pour moi mais j'en ai ajouté moi-même pour le réparer pour mon cas. (j'ai plusieurs enfants imbriqués, certains doivent être ignorés et d'autres non)

@timmywil Est-il possible de sortir une nouvelle version avec cette option ?

Edit: En fait, j'ai le même problème que romi45. ??

Edit 2 : Une option pour lister les éléments à ignorer serait utile, comme :

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

Edit 3: Je pense avoir trouvé la solution dans la FAQ "Comment faire fonctionner les liens s'ils se trouvent dans un élément Panzoom?".

ce que je fais est de commenter le preventDefault à la ligne 969. preventDefault empêchera l'événement d'atteindre ses enfants.

@akhnaz ,

D'après ma compréhension, preventDefault empêchera l'action par défaut associée à un élément (un enfant ou l'élément panzoom lui-même), et stopPropagation empêchera les événements de remonter jusqu'à un élément parent.

Il y a une solution simple et élégante dans la FAQ :


  1. Comment faire fonctionner les liens s'ils se trouvent dans un élément Panzoom ? Exemple
  • La propagation des événements est arrêtée pour les événements mousedown et touchstart afin de permettre les éléments Panzoom dans les éléments Panzoom. Pour corriger les liens, liez un gestionnaire d'événement qui empêche l'événement d'atteindre le gestionnaire Panzoom :
$('.panzoom a').on('mousedown touchstart', function( e ) {
  e.stopImmediatePropagation();
});

Cela ne nécessite aucune modification de la bibliothèque elle-même.

Salut @glen-84

Oui, preventDefault empêchera l'action par défaut. Mais, cela empêchera également mouseDown de l'enfant lorsque pointerDown est distribué et écouté.

Dans Chrome 55, pointerDown est maintenant distribué et Microsoft Edge implémente déjà pointerDown depuis le début.

Dans mon cas, panzoom est écouté pointerDown et les enfants écoutent mouseDown.

Voici mon jsbin pour cela :

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

@akhnaz ,

Vous pouvez simplement écouter pointerdown sur l'enfant et arrêter la propagation immédiate...

https://jsbin.com/sicapuledo/edit?html ,js,console,output

Salut,

J'ai un peu amélioré ta fonctionnalité. Je remplace votre option par un tableau possible de classe. L'objectif est d'ignorer les événements uniquement si les enfants ont l'une des classes répertoriées. Bien sûr, il suffit de définir la valeur sur le vrai travail lorsque vous l'avez implémenté.

Je n'ai pas vraiment le temps de forker correctement et de faire une pull request. Veuillez inclure cette petite amélioration et la demande d'extraction dans le référentiel principal.

Voici le code mis à jour à partir de vos lignes de fourche 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 */

L'option ignoreChildrensEvents peut être définie comme true, false ou ['child-class1', 'child-class2'].

Salutations

s'il vous plaît publier une version plus récente contient ignoreChildrensEvents

Cette page vous a été utile?
0 / 5 - 0 notes