Leaflet: iOS13ではコンテキストメニューがトリガーされません

doubleClickZoomを起動するためのダブルタップはiOS13でも機能しません。コンテキストメニューの修正は解決するためにはるかに重要です。

私は同じ問題を確認します。 最初の調査の後、iOS 13Safariはタッチイベントを適切に発生させないようです。

iOS Safariでのロングタップは、Leafletライブラリにイベントを送信せず、iOS自体によって処理されます。

ダブルクリックすると、次のイベントが発生します：mouseover、mousemove、mousedown、mouseup、click。これにより、リーフレットのイベントクリックが発生します。

モバイルSafariiOS 13の深刻な問題のように思えますが、モバイルSafariをデスクトップSafariと非常によく似たものにするために何か関係があると思います。 タッチイベントがリーフレットに適切に送信されない限り、修正することはあまりありません。

これをAppleに報告する人はいますか？

先週、Appleサポートにレポートを送信します。 まだ答えはありません。

もう少し情報があります。 マップdivにクリックハンドラーを追加し、ズームコントロールが有効になっている場合、長押しはコンテキストメニューのコピー/貼り付けとして機能し始めます。
そのように

<div id="mapid" onclick="javascript:void(0)"/>

 -webkit-user-select: none;
 -webkit-touch-callout: none;

また、役に立たず、コピー/貼り付けメニューを無効にするだけです

多分それは誰かのために役立つでしょう。

長押しの一時的な解決策として：
このライブラリを追加する
https://www.cssscript.com/handle-long-press-tap-event-in-javascript-long-press-js/
そしてcssで
-webkit-user-select: none; -webkit-touch-callout: none;

長押しイベントのリスナーを追加するよりも。 そして、ここでイベントハンドラーで座標をリーフレット座標に変換します。

ライブラリは機能しますか？ これまでのところ、ソースコードを確認しましたが、ライブラリはとにかくSafariに送信されないタッチイベントをリッスンします。 ちょっと興味があるんだけど。

はい、動作します。 少なくとも長押しの場合。
iOS13とiPadOS13で確認しました

素晴らしいヒントthx

これは、私たちが使用する最終的な解決策です。 ロングタップを検出し、「contextmenu」MenuEventをエミュレートします。 それをJSコードに入れるだけで、うまくいくはずです。

注：リスナーが多すぎないように、iOS13ユーザーのみの実行を制限することをお勧めします

// Copied and modified from https://github.com/john-doherty/long-press-event/

import rs from 'rootScope'
import $ from '$'

if( rs.platform === 'ios' && / OS 13_/.test( navigator.userAgent ) ) {

    // This is our main map el
    const mapEl = $('#map-container')

    // This class adds  -webkit-user-select: none; -webkit-touch-callout: none;
    // to the BODY el
    document.body.classList.add('ios13')

    let timer = null;

    const fireLongPressEvent = originalEvent => {

        clearLongPressTimer();

        const el = originalEvent.target
        , x = originalEvent.touches[0].clientX
        , y = originalEvent.touches[0].clientY

        // This will emulate contextmenu mouse event
        const event = new MouseEvent('contextmenu', {
                                    bubbles: true,
                                    cancelable: true,
                                    clientX: x,
                                    clientY: y
                                })


        // fire the long-press event
        const suppressClickEvent = el.dispatchEvent.call(el,event);

        if (suppressClickEvent) {

            // temporarily intercept and clear the next click
            mapEl.addEventListener('touchend', function clearMouseUp(e) {
                mapEl.removeEventListener('touchend', clearMouseUp, true);
                cancelEvent(e);
            }, true);
        }
    }

    const startLongPressTimer = e => {
        clearLongPressTimer(e);
        timer = setTimeout( fireLongPressEvent.bind(null,e), 1000 );
    }

    const clearLongPressTimer = () => {
        if(timer) {
            clearTimeout(timer);
            timer = null;
        }
    }

    const cancelEvent = e => {
        e.stopImmediatePropagation();
        e.preventDefault();
        e.stopPropagation();
    }

    // hook events that clear a pending long press event
    mapEl.addEventListener('touchcancel', clearLongPressTimer, true);
    mapEl.addEventListener('touchend', clearLongPressTimer, true);
    mapEl.addEventListener('touchmove', clearLongPressTimer, true);

    // hook events that can trigger a long press event
    mapEl.addEventListener('touchstart', startLongPressTimer, true); // <- start

}

同様の問題を調査しているときに、このスレッドに出くわしました。 私が発見した呼び出しpreventDefaultにtouchstartあなたがいつものようにタッチイベントを受け取るため、以前のようにダブルタップをチェックすることができます。

これは、モバイルSafariがホバーイベントのシミュレーション方法を変更したという事実に帰着すると思います（メニューなどを開くためにホバーイベントのみに依存するWebサイトを機能させるため）

同様の問題を調査しているときに、このスレッドに出くわしました。 私が発見した呼び出しpreventDefaultにtouchstartあなたがいつものようにタッチイベントを受け取るため、以前のようにダブルタップをチェックすることができます。

これは、モバイルSafariがホバーイベントのシミュレーション方法を変更したという事実に帰着すると思います（メニューなどを開くためにホバーイベントのみに依存するWebサイトを機能させるため）

これまでのところ、私にとっては逆に機能します。ロングタップを除くすべてのクリックを抑制します。 自分に合ったコードを共有できますか？

申し訳ありませんが、ダブルタップを検出するために生のタッチイベントを使用していると想定していました。 クリック/マウスイベントに依存している場合は、タッチスタートのpreventDefaultでそれらを防ぐことができます。

いずれにせよ、13.1で修正されたiOSのバグのようです。

@felixhagelohこのデモを実行している
http://aratcliffe.github.io/Leaflet.contextmenu/examples/index.html

しかし、問題が修正されたようには見えません！ 私が見逃しているものはありますか？
私たちは長押しのイベントに大きく依存しているので、私たちにとって本当に重大な問題です。どんな助けでもありがたいです。

これは、 WebKitのバグ＃202143から参照されている問題です。 WebKitチーム（この場合は私）が調査中です。

これは、 WebKitのバグ＃202143から参照されている問題です。 WebKitチーム（この場合は私）が調査中です。

あなたがこの問題に飛び込んでいることをとてもうれしく思います。 Web開発者として、タッチイベントが発生した場合にiOS13.xのSafariがiOS12.xまたはAndroidのChromeと同じように動作することを嬉しく思います。

あなたがここにいることを嬉しく思います。

@ majid701混乱を起こしてしまったら、ごめんなさい。 13.0で見た問題は次のとおりです。
ダブルタップ（すばやく）->シングルタッチスタートとタッチエンドが起動されました。

13.1以降、2つのタッチスタートイベントとタッチエンドイベントを再び正しく受信しています。 私が維持しているアプリは、生のタッチイベントを使用してダブルタップを検出するため、この固定ダブルタップズームを使用します。 私はこれがあなたにも当てはまると間違って思っていました。

if（rs.platform === 'ios' && / OS 13 _ /。test（navigator.userAgent））

これは、ユーザーエージェント文字列は、デスクトップ上のSafariと同じであるとiOSをアドバタイズしませんiPadOSの仕事に行くされていないことを注意@ilblog。

_（WebKitバグから再投稿して、このバグにCcした人だけがこれを見ることができるようにします。）_

contextmenu Leafletイベントはトリガーされません。これは、Leafletコードがpointerdown touchstartイベントと_onDownメソッドにこのチェックif (!e.touches) { return; }あり、 PointerEventイベントはTouchEventと同じではないため、常に早期のリターンにつながります。 touchesプロパティはありません。

したがって、リーフレットcontextmenuイベントがトリガーされないことは、特にリーフレットの問題です。

実際、このコードは次の理由により、ポインターイベントでは実行されません。

if (Browser.touch && !Browser.pointer) {
    Map.addInitHook('addHandler', 'tap', Tap);
}

iOS 13では、 Browser.touchとBrowser.pointer両方がtrueであるため、パッケージ全体が初期化されません。

先週、Appleサポートにレポートを送信します。 まだ答えはありません。

@ ginger-777バグ番号/フィードバックIDはありますか？ 一般的に、WebKit開発者の注意を引く最良の方法は、bugs.webkit.orgで直接バグを報告することです。

@graoutsはい、あなたの最後のコメントを読んだ後、私もそれに気づきました。 しかし、 Settings -> General -> Experimental Featuresからのポインターイベントの無効化をテストしたところ、このデモWebサイトで機能するように見えました。
http://aratcliffe.github.io/Leaflet.contextmenu/examples/index.html

しかし、それは私のアプリ内では機能しません。 Webview内にリーフレットを読み込んでいます。

ダブルタップしてズームすることに関しては、それはLeafletの問題でもあります。 DomEvent.DoubleTapこのコードを検討してください：

function onTouchStart(e) {
    var count;

    if (Browser.pointer) {
        if ((!Browser.edge) || e.pointerType === 'mouse') { return; }
        count = _pointersCount;
    } else {
        count = e.touches.length;
    }

    if (count > 1) { return; }

    var now = Date.now(),
        delta = now - (last || now);

    touch = e.touches ? e.touches[0] : e;
    doubleTap = (delta > 0 && delta <= delay);
    last = now;
}

ブラウザがポインタイベントをサポートしていて、それがEdgeでない場合、関数は早期に終了します。 これは、iOS13上のSafariまたはWebKitベースのブラウザの場合です。

私の知る限り、ここで報告されている両方の問題は、タッチイベントとポインターイベント（長押しとcontextmenuイベント）の両方をサポートするブラウザー、またはポインターイベントをサポートしているがMicrosoftEdgeではないブラウザーの準備ができていないリーフレットです。 （ダブルタップとdblclickイベント）。

この段階で修正するものがないため、WebKitのバグを閉じました。

@graoutsはい、あなたの最後のコメントを読んだ後、私もそれに気づきました。 しかし、 Settings -> General -> Experimental Featuresからのポインターイベントの無効化をテストしたところ、このデモWebサイトで機能するように見えました。
http://aratcliffe.github.io/Leaflet.contextmenu/examples/index.html

しかし、それは私のアプリ内では機能しません。 Webview内にリーフレットを読み込んでいます。

はい@ majid701 、この設定はSafariにのみ適用され、 WKWebViewやiOSにWebKitを埋め込む他の方法には適用されないと思います。 Safariアプリの外部でポインターイベントを無効にする方法がわかりません。

解決策は、iOS 13 Safariを「pinterType」ブラウザとして検出し、タッチイベントを正しく処理しないLeafletライブラリを修正することだと思います。

この件に関してあなたの努力と多くの助けをありがとう@graouts 。

モバイルデバイスのダブルタップ、同じコード行へのパッチ適用に関するPRが進行中ですhttps://github.com/Leaflet/Leaflet/pull/6815なので、この問題についても説明するように依頼しました。

if（rs.platform === 'ios' && / OS 13 _ /。test（navigator.userAgent））

これは、ユーザーエージェント文字列は、デスクトップ上のSafariと同じであるとiOSをアドバタイズしませんiPadOSの仕事に行くされていないことを注意@ilblog。

開発者がmacOSとiPadを区別できない場合、別の一連の問題が発生する可能性があるため、これは興味深いことです。 これはこのリーフレットのバグとは関係ありませんが、Appleも対処する必要があると思います。

https://forums.developer.apple.com/thread/119186

解決済み

Appleからの貴重な意見のおかげで、少なくともiPhoneでiOS13の問題を修正することができました。 iOS13上のiPadにはmacOSと同じユーザーエージェント文字列があるため、iPadで問題を修正できませんでした。

src/core/Browser.jsように変更するだけです。

// 'false' for all iOS devices, that (as of version iOS13 support both, touch and pointer events)
// Unfortunately as of iOS13 it is not possible to distinguish iPad from OS X by user agent string
export var pointer = !!(window.PointerEvent || msPointer) && !userAgentContains('iphone');

修正を伴うプルリクエストはこちら

https://github.com/Leaflet/Leaflet/pull/6827

if（rs.platform === 'ios' && / OS 13 _ /。test（navigator.userAgent））

これは、ユーザーエージェント文字列は、デスクトップ上のSafariと同じであるとiOSをアドバタイズしませんiPadOSの仕事に行くされていないことを注意@ilblog。

開発者がmacOSとiPadを区別できない場合、別の一連の問題が発生する可能性があるため、これは興味深いことです。 これはこのリーフレットのバグとは関係ありませんが、Appleも対処する必要があると思います。

一般に、ユーザーエージェント文字列に基づいて決定を下すのは最適なアプローチではありません。 ケースバイケースでの機能検出は、ほとんどのユースケースに適しています。 さらに、iPadOS上のSafariは、デバイスクラス（iPad miniと他の大画面iPadモデル）に応じて、またはSafariが3分の1を使用するマルチタスクのウィンドウのサイズに応じて、異なるユーザーエージェント文字列を使用する場合があります。画面、またはユーザーの好みに応じて（モバイル/デスクトップWebサイトをリクエスト）。

機能の検出が適切でない場合は、bugs.webkit.orgでバグを報告してください。そうすれば、WebKitチームが最適な解決策を決定できます。

iPadOS 13でこの問題を解決する方法に関する更新はありますか？
マウスダウン/マウスアップイベントを使用しています。

こんにちは、みんな、

UAをスニッフィングしてそれをいじくり回すよりも、より安定しているはずなので、より良い解決策を試しました。
https://github.com/Leaflet/Leaflet/pull/6855
まだUAをスニッフィングしていますが、テストできないプラットフォームのコードを変更しないようにしています。 edge条件は、 dblclickイベントがトリガーされる可能性があるため、ベイルアウトするために存在するようです。 ポインターイベントのBrowser.pointer機能テストは、そこで必要な唯一のテストであり、他のテストは狭く、非常に具体的である必要があるように思われます（ただし、私はJSに精通していません）。 「Edgeでない場合は救済する」（「理由」がない）の代わりに、「Edgeの場合は別のことをする」（コメントに理由がある）必要があるように見えます。

ただし、iPadのiOS13でまだ問題が発生しています。

@graouts ：Re： https ：//github.com/Leaflet/Leaflet/issues/6817#issuecomment-536581361およびhttps://github.com/Leaflet/Leaflet/issues/6817#issuecomment-536587962 ：
私はこれをiPadで動作させようとしています（上記のPRでiPhoneで修正しました）が、ダブルタップしても2番目のpointerdownトリガーされません。 ブレークポイントを送信し、 log()呼び出しを追加しましたが、トリガーされているものが表示されません。 iPadが状況によっては2回目のタップを省略しているようです。
「トリプル/クアッドクリック」でズームできますが、ダブルクリックではできません。 グローバルハンドラー（ touchstart / touchendを要求するものの互換性レイヤー）のログは、ダブルタップではトリガーされません。
iPad（iOS13を搭載）がこれらの2番目のタップを省略するために何ができるかについてのアイデアはありますか？ しきい値は250ミリ秒ですが、320ミリ秒より速い場合、2回目のタップで登録できません。
「モバイル向けリーフレット」ページに記載されているように、ヘッダーに<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />があります。

@graouts （申し訳ありませんが、あなたを選ぶのではなく、WebKitチームから来たと言ったのであなたに尋ねるだけです）：
次のイベントリスナーテストページを試してみると、次のようになります。
https://patrickhlauke.github.io/touch/tests/event-listener.html

iPhoneとiPadのiOS13の違いを見ることができます。 iPhoneでは、ボタンをダブルタップすると、 pointerdown+pointerup 2つのシーケンスが表示されます。 iPadでは、ダブルタップでこのシーケンスをトリガーすることはできません。 しばらくの間イベントを開催します。

ありがとうございました、
フィリペ

@filcab bugs.webkit.orgにバグを報告してください。確認します！ そうは言っても、この問題は、developer.apple.comで開発者シードビルドがすでに利用可能なiOS13.2で修正されていると思います。 ただし、チームが確認できるように、常にwebkit.orgのバグを報告してください。

@filcab bugs.webkit.orgにバグを報告してください。確認します！ そうは言っても、この問題は、developer.apple.comで開発者シードビルドがすでに利用可能なiOS13.2で修正されていると思います。 ただし、チームが確認できるように、常にwebkit.orgのバグを報告してください。

https://bugs.webkit.org/show_bug.cgi?id=203031を提出しました

みなさん、貴重な情報をありがとうございました。できるだけ早く調査しています。 私は休暇中なのでコーディングできませんが、他のメンテナに優先順位を付けるようにpingを送信しました。

議論をざっと見てみると、問題の原因はiOS13がポインターイベント仕様をサポートしているようです。そのため、Leafletは、通常のタッチイベントが利用できなかったレガシーIEモバイルブラウザー用に特別に最適化したコードパスを部分的に取得します。

＃6827のようなエージェント文字列のスニッフィングはあまり信頼できません（いつでも壊れることがあります）。 ＃6855のようなポインターイベントを修正する方が良いかもしれませんが、そのコードを書いたときにポインターコードパスが最新のブラウザーで機能することを意図していなかったことを考えると、それでも非常に危険です。 通常のタッチイベントが正しく機能することを以前に検出した場合は、ポインタイベントを完全に無効にしてみてください（つまり、 export var pointer = !webkit && !!(window.PointerEvent || msPointer)ようなもの）。

みなさん、貴重な情報をありがとうございました。できるだけ早く調査しています。 私は休暇中なのでコーディングできませんが、他のメンテナに優先順位を付けるようにpingを送信しました。

議論をざっと見てみると、問題の原因はiOS13がポインターイベント仕様をサポートしているようです。そのため、Leafletは、通常のタッチイベントが利用できなかったレガシーIEモバイルブラウザー用に特別に最適化したコードパスを部分的に取得します。

＃6827のようなエージェント文字列のスニッフィングはあまり信頼できません（いつでも壊れることがあります）。 ＃6855のようなポインターイベントを修正する方が良いかもしれませんが、そのコードを書いたときにポインターコードパスが最新のブラウザーで機能することを意図していなかったことを考えると、それでも非常に危険です。 通常のタッチイベントが正しく機能することを以前に検出した場合は、ポインタイベントを完全に無効にしてみてください（つまり、 export var pointer = !webkit && !!(window.PointerEvent || msPointer)ようなもの）。

特にポインタイベントのコードが思ったほど最近のものでない場合は、それは良いことだと思います。 提案されたパッチでPRを更新します（iOS 13を搭載したiPadとiPhoneでテストしたばかりで、両方で動作します）。

ありがとうございました、
フィリペ

標準の観点からは、タッチイベントではなくポインタイベント（利用可能な場合）を使用することをお勧めします。これはW3C標準であり、ベンダー固有のテクノロジではないためです。

技術的な観点から、少なくともiOSの実装では、パフォーマンスに影響があります。 タッチイベントは常に同期的にディスパッチされるため、それらを処理した結果として実行されるJS作業はブロックされ、応答性が低下する可能性があります。 ポインターイベントは、非同期で実装できるように設計されており、iOSでは実装されています。

この特定の問題ではないかもしれませんが、将来のために覚えておく価値のある2つのことを検討する価値があります。

修正＃6855がマーカーで機能しない可能性がありますか？ マーカーを長押ししてもコンテキストメニューがトリガーされないが、OSの共有/コピーメニューが表示されるという報告があります...

こんにちは@eliboni 、
要素に-webkit-touch-callout: none; （または同様の...私はこれが苦手です😅）を使用する必要があるようです。 ただし、どちらかはわかりません。 * { -webkit-touch-callout: none; }追加すると、私のテストで機能しました（iPhoneを使用してマーカーでトリガーされたcontextmenuイベント）。
必要に応じて調整します。

やあ、
Leaflet.jsでダブルタップズームを使用できません。
この投稿を読んだばかりですが、解決策が見つかりませんでした。
誰か助けてくれませんか？

よろしくキャンディ。

最後に私は解決策を見つけました：

リーフレット1.5に更新し、以下でdeTapを有効にする必要があります。

new L.map("mapid",{ attributionControl: false, zoomControl: false, tap: true });

正常に動作します。

よろしくお願いします

@bitxenio 、

1.5.1を使用しても機能しないのではないかと思います

IOS 13.2も機能していないように見えるので、今は自分のハンドラーを作成することに戻ります:(

@ rwillett 、 @ Bitxenio ：どのコードを使用していますか？ 両方とも、リーフレットの特定のバージョンについて言及しています。
10月にコミットされたPR＃6855の修正は、5月に戻った最新リリースには含まれていません。

masterますか？

ありがとうございました、
フィリペ

ああ！ 公式リリースを使用しました。 PR＃6855が含まれていないことに気づきませんでした。 私たちのせい。

devブランチをダウンロードして、試してみます。

ありがとう

ロブ

1.6-devをダウンロードしましたが、正常に動作します。 iOS13.2のダブルタップとコンテキストメニューの両方。

助けてくれてありがとう、感謝します。

ロブ

1.6.0でリリース

通常のタッチイベントが正しく機能することを以前に検出した場合は、ポインタイベントを完全に無効にしてみてください（つまり、 export var pointer = !webkit && !!(window.PointerEvent || msPointer)ようなもの）。

@mourner
それは確かに危険であり、＃6896のような問題を引き起こしました。
https://github.com/Leaflet/Leaflet/issues/6977#issuecomment-577638632でディスカッションに参加して