Panzoom: Panzoomは、最新のChromeでサブアイテムのマウスダウンイベントを非表示にします

作成日 2016年12月07日  ·  12コメント  ·  ソース: timmywil/panzoom

jquery.draggableでこの素晴らしいプラグインを使用して、ドラッグ可能なノードで図をパン/ズームしました。
しかし、最新のChromeアップデート後、ノードはドラッグできなくなります。

少しの調査では、Chromeがpointerdownイベントで何かを変更したことが示されました。
そのため、panzoomプラグインは、mousedownイベントが発生する前に、子ノードのpointerdownイベントに応答するようになりました。
Panzoomはpointerdownイベントを抑制し、その後何らかの理由でmousedownイベントが発生しないため、ドラッグは開始されません。

jquery.panzoom.js v3.2.2
jquery3.1.0またはv1.11.3
jqueryui1.12.0または1.10.3
Chrome 55.0.2883.75(64ビット)Ubuntu 16.04

これがデモです
http://codepen.io/yurigor/pen/yVjeGB

この問題を修正するためにオプション「ignoreChildrensEvents」を追加しました
この変更でプルリクエストを行う必要があるかどうかわかりません。

最も参考になるコメント

お力になれて、嬉しいです!
それを必要とする人は誰でも、ここに直接リンクがあります:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil 、私の変更をマージしたい場合は、
私はによってlivereloadを開始します
grunt watch:dev
しかし、それは機能しません。
http:// localhost :35711 /で私は持っています
{"tinylr":"Welcome","version":"0.2.1"}
とで
http:// localhost :35711 / test / index.html
また
http:// localhost :35711 / demo / index.html
私が持っています
{"error":"not_found","reason":"no such route"}

全てのコメント12件

私は同じ問題を抱えています、クロームv55。 ドラッグ可能なウィンドウがあり、子供向けのマウスダウンイベントを取得したいこれを修正するために何をしましたか? あなたは変更のあるブランチを持っていますか、私は今のところ立ち往生しています。

あなたのブランチを見つけました、そしてそれは私の問題を非常にうまく修正します。 ありがとうYuriGorこれは素晴らしいです

お力になれて、嬉しいです!
それを必要とする人は誰でも、ここに直接リンクがあります:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil 、私の変更をマージしたい場合は、
私はによってlivereloadを開始します
grunt watch:dev
しかし、それは機能しません。
http:// localhost :35711 /で私は持っています
{"tinylr":"Welcome","version":"0.2.1"}
とで
http:// localhost :35711 / test / index.html
また
http:// localhost :35711 / demo / index.html
私が持っています
{"error":"not_found","reason":"no such route"}

どうもありがとう。 この修正は私には十分ではありませんでしたが、自分の場合に修正するために自分で追加しました。 (私には複数のネストされた子があり、それらのいくつかは無視されるべきであり、他は無視されるべきではありません)

@timmywilこのオプションで新しいバージョンをリリースすることは可能ですか?

編集:実際、私はromi45と同じ問題を抱えています。 😞

編集2:無視する要素を一覧表示するオプションは、次のように役立ちます。

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

編集3:FAQ「リンクがPanzoom要素内にある場合にリンクを機能させるにはどうすればよいですか?」で解決策を見つけたかもしれないと思います。

私がしていることは、969行目でpreventDefaultをコメントアウトすることです。preventDefaultは、イベントがその子に到達するのをブロックします。

@akhnaz

私の理解では、 preventDefaultは、要素(子またはパンズーム要素自体)に関連付けられたデフォルトのアクションを防ぎ、 stopPropagationは、イベントが親要素にバブリングするのを防ぎます。

FAQにはシンプルでエレガントな解決策があります:


  1. リンクがPanzoom要素内にある場合、リンクを機能させるにはどうすればよいですか? 例
  • Panzoom要素内のPanzoom要素を許可するために、mousedownイベントとtouchstartイベントのイベント伝播が停止されます。 リンクを修正するには、イベントがPanzoomハンドラーに到達しないようにするイベントハンドラーをバインドします。
$('.panzoom a').on('mousedown touchstart', function( e ) {
  e.stopImmediatePropagation();
});

これには、ライブラリ自体を変更する必要はありません。

こんにちは@ glen-84

はい、preventDefaultはデフォルトのアクションを防ぎます。 ただし、pointerDownがディスパッチされてリッスンされているときに、子からのmouseDownも防止されます。

Chrome 55では、pointerDownがディスパッチされ、MicrosoftEdgeは最初からpointerDownを実装しています。

私の場合、panzoomはpointerDownをリッスンし、子はmouseDownをリッスンします。

これが私のjsbinです:

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

@akhnaz

子でpointerdownを聞くだけで、すぐに伝播を停止できます...

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

やあ、

機能を少し改善しました。 私はあなたのオプションをクラスの可能な配列にオーバーライドします。 目標は、子供がリストされたクラスの1つを持っている場合にのみ、イベントを無視することです。 もちろん、実装時に値をtrueに設定するだけです。

適切にフォークしてプルリクエストを行う時間が本当にありません。 その小さな改善とメインリポジトリへのプルのリクエストを含めてください。

フォークライン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 */

ignoreChildrensEventsオプションは、true、false、または['child-class1'、 'child-class2']として定義できます。

よろしく

ignoreChildrensEventsを含む新しいバージョンをリリースしてください

このページは役に立ちましたか?
0 / 5 - 0 評価