リーフレットマーカーを右クリックしてイベントの伝達を停止するにはどうすればよいですか?


9

リーフレットマーカーで右クリックイベントが見つからなかったので、マウスダウンイベントを聞き始めました。このイベントを解決するメソッドで、私はチェックします

if (event.originalEvent.button == 2) {
    do_something();
    // now i want to stop propagation of the rightclick
    return;
}

これは、do_something()が呼び出されることで機能しますが、イベントはマップに伝播し、コンテキストメニューが表示されます。イベントがマップに伝播しないようにするにはどうすればよいですか?

これはすべての主要な(つまりIE)ブラウザで動作しますか?

回答:


4

私の最初の答えはどうやらうまくいかず、今は同じ問題に直面しています。ここに新しいアプローチがあります:

リーフレットはというイベントをサポートしていcontextmenuます。こちらのリーフレットイベントのドキュメントに記載されています

ユーザーがマップ上でマウスの右ボタンを押すと発生し、このイベントにリスナーがある場合、デフォルトのブラウザーコンテキストメニューが表示されないようにします

理論的にはコード

marker.on('contextmenu', function(e) {
  this.openPopup();
});

正常に動作するはずです。しかし、どうやら実装はドキュメントよりも遅れています。現在(Leaflet 0.4.5)、contextmenuイベントはマーカーでまだサポートされてないようですが、ポリラインオブジェクトでは完全に正常に機能します。

近い将来、この機能を有効にするための作業がパイプラインで行われているようです(ここここのディスカッションを参照)。したがって、Leafletがこれに迅速に取り組み、次のリリースでイベントを有効にできることを願っています...

編集: 実装の待機について私が言ったことは無視してください。最新の開発マスターブランチをダウンロードしてリーフレットを自分で作成するとcontextmenu、マーカーのイベントが完全にサポートされます。ハッピーコーディング。


4

IEおよび他のすべてのブラウザーでのデフォルトの動作の防止:

event.returnValue = false;
if (event.preventDefault) event.preventDefault();

動作しないようです。これをリーフレットでテストしましたか?そして、あなたのイベントはリーフレットイベントですか、それともブラウザによって起動された元のDOMMouseEventですか?
mrg

これはDOMイベント用です。リーフレットがイベントをラップする場合は、event.originalEventを使用します。
tmcw

4

次の内部関数を試してください:

L.DomEvent.stopPropagation(event);

トリックを行う必要があります。

PS私はそれをどのドキュメントでも見つけたことはありませんが、パッチで使用されているのを見ました。自己責任。;)

編集:私はこの内部関数も見つけました

L.DomEvent.preventDefault(event);

event.preventDefault()これはjQueryの場合と非常によく似ているようです。


私はあなたのスニペットを使用しましたが、何が起こるかはtmcwのソリューションと同じです。マーカーを右クリックします。リスニング方式になります。そこで、マーカーが削除され(つまり、右クリックで何ができるか)、マップ上でコンテキストメニューが開き、マーカー全体が発生していないかのようにクリックしました。
mrg 2012年

たまたまこれを見つけたL.DomEvent.preventDefault(event);。私が見たもの(Leaflet.jsソースを見る)から、これはpreventDefault()jQueryによって提供されるものと非常によく似ているはずです...試してみてください!:)
fgysinがモニカを復活させる

試してみましたが、htmlページを右クリックすると、FFで表示される標準のコンテキストメニューがポップアップし続けます。
mrg

2

ついでにイベントを停止するための解決策を得ました。

たとえば、次のようにイベントが作成された場合- map.on("click", onMapClick);、このコードでイベントを停止できます-map.off("click", onMapClick);

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.