2

各要素のクリック イベントにバインドされたコールバックを持つ多くの要素を含むページがあります。

ページはビューポートよりも大きく、ユーザーは標準的な方法でスクロールできます (マウスホイール、スクロールバーを使用...)

ここで、ユーザーがページをスクロールする別の方法を提供する、パン モードを実装する必要があります。

ユーザーがクリックし、マウスダウンでドラッグすると、ページがスクロールします。

body要素にmousedown、mousemove、mouseupを簡単に登録できるように実装しました。ユーザーがドラッグすると、 window.scrollTo()でウィンドウをスクロールします

問題:ページがマウス ポインターの下で移動するときに、ユーザーが要素をクリックしてページをパンすると、同じ要素で mousedown と mouseup が発生し、 mouseup の後にその要素でもクリック イベントがトリガーされます。

このオフコースは望ましくありません。

クリック イベントは子要素にあるため (マウスの dowm-move-up は本体にあります)、stopPropagationは役に立ちません。

質問: mouseup コールバックの最後で、実際にドラッグが発生したとき (最初と最後のマウス座標を比較して確認できます)、クリック イベントがトリガーされるのを防ぐことはできますか?

4

1 に答える 1

6

これは、本体のキャプチャ フェーズでクリック イベントをキャンセルするだけで簡単に実行できます。

document.body.addEventListener("click", allowClick, true);
function allowClick(event) {
    if (panMode) {
        event.stopPropagation();
    }
}

グローバル フラグに基づいてクリックを無視する例については、このフィドルを参照してください。(最新の Firefox、Chrome、IE でテスト済み)。

JavaScriptでのイベントのキャプチャ フェーズとバブル フェーズの明確な説明については、javascript.infoを参照してください。

于 2014-01-06T22:09:24.960 に答える