Panzoom: Panzoom verbirgt das Mousedown-Ereignis von Unterelementen auf dem neuesten Chrome

Erstellt am 7. Dez. 2016  ·  12Kommentare  ·  Quelle: timmywil/panzoom

Ich habe dieses großartige Plugin mit jquery.draggable verwendet, um Diagramme mit ziehbaren Knoten zu schwenken / zu zoomen.
aber nach dem neuesten Chrome-Update werden die Knoten nicht mehr tragbar.

Kleine Untersuchungen haben ergeben, dass Chrome mit seinem Pointerdown-Ereignis etwas geändert hat.
Also reagiert das Panzoom-Plugin jetzt auf das Pointerdown-Ereignis des untergeordneten Knotens, bevor das Mousedown-Ereignis ausgelöst wird.
Panzoom-Unterdrückungs-Pointerdown-Ereignis und aus irgendeinem Grund gibt es danach kein Mousedown-Ereignis, sodass das Ziehen nicht beginnt.

jquery.panzoom.js v3.2.2
jquery 3.1.0 oder v1.11.3
jqueryui 1.12.0 oder 1.10.3
Chrome 55.0.2883.75 (64-Bit) Ubuntu 16.04

Hier ist eine Demo
http://codepen.io/yurigor/pen/yVjeGB

Ich habe die Option 'ignoreChildrensEvents' hinzugefügt, um dieses Problem zu beheben
Ich bin mir nicht sicher, ob ich mit diesen Änderungen Pull-Requests machen soll.

Hilfreichster Kommentar

Freue mich zu helfen!
Wer es auch braucht, hier ist ein direkter Link:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , wenn du meine Änderungen zusammenführen möchtest, hilf mir bitte mit Grunzen.
Ich starte Leberladung um
grunt watch:dev
aber es funktioniert nicht.
Unter http://localhost :35711/ habe ich
{"tinylr":"Welcome","version":"0.2.1"}
und bei
http://localhost :35711/test/index.html
oder
http://localhost :35711/demo/index.html
Ich habe
{"error":"not_found","reason":"no such route"}

Alle 12 Kommentare

Ich habe das gleiche Problem, Chrome v55. Ich habe ein verschiebbares Fenster und möchte Mousedown-Ereignisse für Kinder abrufen. Was haben Sie getan, um das Problem zu beheben? hast du eine Nebenstelle mit der Änderung, ich stecke erst mal fest.

habe deine Filiale gefunden und sie behebt mein Problem sehr sehr schön. Danke YuriGor das ist wunderbar

Freue mich zu helfen!
Wer es auch braucht, hier ist ein direkter Link:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , wenn du meine Änderungen zusammenführen möchtest, hilf mir bitte mit Grunzen.
Ich starte Leberladung um
grunt watch:dev
aber es funktioniert nicht.
Unter http://localhost :35711/ habe ich
{"tinylr":"Welcome","version":"0.2.1"}
und bei
http://localhost :35711/test/index.html
oder
http://localhost :35711/demo/index.html
Ich habe
{"error":"not_found","reason":"no such route"}

Danke vielmals. Dieser Fix war nicht genug für mich, aber ich habe selbst einige hinzugefügt, um ihn für meinen Fall zu beheben. (ich habe mehrere verschachtelte Kinder, von denen einige ignoriert werden sollten und andere nicht)

@timmywil Ist es möglich, mit dieser Option eine neue Version zu veröffentlichen?

Edit: Eigentlich habe ich das gleiche Problem wie romi45. 😞

Bearbeiten 2: Eine Option zum Auflisten der zu ignorierenden Elemente wäre hilfreich, wie zum Beispiel:

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

Bearbeiten 3: Ich glaube, ich habe die Lösung in der FAQ "Wie bringe ich Links zum Funktionieren, wenn sie sich in einem Panzoom-Element befinden?" gefunden.

Was ich tue, ist, das PreventDefault in Zeile 969 auszukommentieren. PreventDefault wird das Ereignis daran hindern, seine Kinder zu erreichen.

@akhnaz ,

Nach meinem Verständnis verhindert preventDefault die mit einem Element verbundene Standardaktion (ein Kind oder das Panzoom-Element selbst), und stopPropagation , dass Ereignisse zu einem übergeordneten Element sprudeln.

In den FAQ gibt es eine einfache und elegante Lösung:


  1. Wie bringe ich Links zum Funktionieren, wenn sie sich in einem Panzoom-Element befinden? Beispiel
  • Die Ereignisausbreitung wird für Mousedown- und Touchstart-Ereignisse gestoppt, um Panzoom-Elemente innerhalb von Panzoom-Elementen zu berücksichtigen. Um die Links zu reparieren, binden Sie einen Ereignishandler, der verhindert, dass das Ereignis den Panzoom-Handler erreicht:
$('.panzoom a').on('mousedown touchstart', function( e ) {
  e.stopImmediatePropagation();
});

Dies erfordert keine Änderungen an der Bibliothek selbst.

Hallo @glen-84

Ja, PreventDefault verhindert die Standardaktion. Es wird jedoch auch mouseDown vom Kind verhindern, wenn pointerDown gesendet und überwacht wird.

In Chrome 55 wird pointerDown jetzt abgefertigt und Microsoft Edge implementiert PointerDown bereits von Anfang an.

In meinem Fall hört panzoom auf pointerDown und die Kinder hören auf mouseDown.

Hier ist mein Jsbin dafür:

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

@akhnaz ,

Sie können einfach pointerdown auf das Kind hören und die sofortige Vermehrung stoppen ...

https://jsbin.com/sicapuledo/edit?html ,js,Konsole,Ausgabe

Hi,

Ich habe deine Funktion ein wenig verbessert. Ich überschreibe Ihre Option zu einem möglichen Array von Klasse. Das Ziel ist, Ereignisse nur zu ignorieren, wenn Kinder eine der aufgeführten Klassen haben. Natürlich müssen Sie den Wert einfach so einstellen, wie Sie ihn implementiert haben.

Ich habe nicht wirklich Zeit, richtig zu forken und einen Pull-Request zu machen. Bitte fügen Sie diese kleine Verbesserung ein und bitten Sie um einen Pull in das Haupt-Repository.

Hier ist der Code, der aus Ihren Fork-Zeilen 959 aktualisiert wurde:

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 */

Die Option ignoreChildrensEvents kann als true, false oder ['child-class1', 'child-class2'] definiert werden.

Grüße

Bitte veröffentlichen Sie eine neuere Version enthält ignoreChildrensEvents

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen