9

モバイルブラウザの高速クリックを行っています。現在のページのリンクをすばやくクリックすると、次のページへの ajax ロードが実行されます。私の高速クリック スクリプトは、今すぐゴースト クリックを止めることができます。ただし、現在のページのクリック位置で次のページに入力要素がある場合でも、フォーカスを取得して仮想キーボードを表示します。ゴーストフォーカスイベントも防ぐには?

4

3 に答える 3

10

イベントに関連するアクションを防止するには、 と を使用.stopImmediatePropagation()しpreventDefault()ます。

ワーキングデモ

  • stopImmediatePropagation() - 呼び出された同じ関数内のハンドラーは通常どおり実行されますが、同じイベントに関連する他の関数内のアクションはすぐに無視/停止されます。例えば：
// alert will fire
$(document).on('click', '#foo', function(event) {
 event.stopImmediatePropagation();
 alert('Hello world');
});

// but this will be stopped
$(document).on('click', '#foo', function(event) {
 console.log('I am stopped!');
});
  • preventDefault() - 呼び出されると、デフォルトのアクションは無視されます。例えば
<a href="http://www.google.com" id="foo">Google it!</a>

リンクは停止しますが、アラートが発生します

$(document).on('click', '#foo', function(event) {
 event.preventDefault();
 alert('I prefer MSN');
});

イベントが DOM ツリーをバブリングしないようにするには、両方を組み合わせる必要があります。

両方の違いと、両方を組み合わせる必要がある理由を説明するデモを作成しました。

上記に基づいて、コードは次のようになります。

$(document).on('click', '.selector', function (event) {
 event.stopImmediatePropagation();
 event.preventDefault();
});

これが役立つことを願っています。

于 2013-04-11T13:36:14.637 に答える
2

私は fastclick.js を使用しています。次のページで自動トリガーを防ぐ方法は次のとおりです。

グローバル CSS:

#preventClick { width:100%; height:100%; position:absolute; z-index:1000; top:0; left:0; }

次のページの HTML:

<body>
    <div id="preventClick"></div>
    <!-- button on the same coordinate with previous page -->
</body>

次のページのスクリプト:

function onDeviceReady() {
    setTimeout(function(){ $('#preventClick').hide(); }, 300);
}

300 が最小値であり、それ以上を入れても意味がありません

于 2014-05-09T04:55:01.717 に答える
-1

私はこれにしばらく苦労してきましたが、部分的な解決策しか見つかりませんでした。私の問題には十分だと思いますが。うまくいけば、それは他の誰かにも役立つでしょう。

このソリューションは jQuery モバイルに基づいていますが、jQuery モバイルを使用しない場合でも同様のことができる可能性があります。

私がしていることは、他の要素の上に画面全体を埋める空の div を配置して、(ほとんどの) クリック/タッチ イベントをブロックすることです。

<div id="ghostBuster" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:none;"></div>

変更元のページを非表示にする前に表示します。

$("div[data-role='page']").on("pagebeforehide", function() {
     $("#ghostBuster").show();
});

次のページが表示されたら、もう一度非表示にします。

$("div[data-role='page']").on("pageshow", function() {
    $("#ghostBuster").hide();
});

私はそれを非常に徹底的にテストしたわけではなく、Android デバイスでのみテストしましたが、これまでのところ、ゴースト クリックとフォーカスを回避するために機能しているようです。選択ボックスをクリックするゴーストを回避するためには機能しません。また、ページ間の遷移アニメーションが非常に速い場合は機能しません。jQueryモバイルが提供する非ネイティブの代替手段に切り替えることで、選択ボックスの問題を解決しました。

マウスアップ時に div を再度非表示にすることを検討するかもしれませんが、スワイプを使用してページを変更するため、私の場合は機能しません。

それはおそらく最も美しい解決策ではありませんが、これまでのところ、より良い解決策を見つけたり、思いついたりすることができませんでした.

于 2012-12-10T22:39:10.997 に答える