0

ページ上のすべての onclick イベントを無効にし、カスタム関数をバインドし、実行後に以前のすべてのイベントを有効にする方法は?

既に読み込まれているページで動作するはずのブックマークレットを作成しています。jQuery を使用してカスタム ロジックを処理しています (ページは読み込まれた後に jquery 化されます)。どのイベントがいつバインドされるかを制御できないことに注意してください。

現在、私が見つけた最も安定した解決策は、イベントのバインドを解除し、カスタム関数でバインドしてデフォルトのアクションを防止してから、ページをリロードすることです。これは機能しますが、リロードを避けたいです。部分的な回避策は、ページをリロードして前の位置にスクロールすることです (この効果を得る方法は?)。いくつかの可能な解決策は iframe を使用することですが、私はこれを避けたいと思います。

4

5 に答える 5

6

全体に div 要素を配置する方が簡単です...次のようなもの

CSS

.noclick {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999; /* or maybe higher */

    background-color: transparent;
}

jQuery

jQuery(document).ready(function() {
    jQuery('body').append('<div class="noclick" />');
});
于 2012-12-27T14:53:55.937 に答える
2

私が見た良い方法は、モーダル 'マスク' オーバーレイを使用することです。

対話している要素を除いて、ページ全体を覆うグレー表示された透明なマスク。モーダルポップアップウィンドウ。

もう 1 つの方法は、jQuery BlockUI プラグインを使用することです。

于 2012-12-27T14:55:59.667 に答える
1

onclick を別のプロパティに再割り当てしてから、それをオーバーライドできます。

要素が 1 つの例

var btn = document.getElementById("button");
btn._onclick = btn.onclick;
btn.onclick = function(){ return false; };

元のイベントに戻したいとき

var btn = document.getElementById("button");
if (btn._onclick) {
    btn.onclick = btn._onclick;
    btn._onclick = null;
}
于 2012-12-27T15:05:15.087 に答える
0

onclick イベントがクリックされた要素に依存しているかどうか (つまり、どの要素がクリックされたかを知る必要があるかどうか) によって異なります。

独立している場合は、body 要素または他の親にイベント ハンドラーを追加するだけです (親イベントが最初に呼び出され、次に子が呼び出されるため)。

$('body').click(function() { /* your code here */});

それは要素に依存しており、クリックされている要素の「クリック」プロパティに登録されている以前のonclickイベントコードにアクセスできるので、このようなものです(おそらくセレクターでもう少し具体的です) :

$('body *').each(function() {
  var previousClick = this.click;
  this.click = null; // remove previous
  $(this).click(function() { /* your code here */});
  $(this).click(function() { previousClick();}); // run the code that was already there.
})
于 2012-12-27T15:57:30.500 に答える
0

いくつかの修正アルゴリズムの答え。アイデアは、透明な要素でリンクを「覆う」ことです。疑似要素を使用できます (例:after )。

「タブ キー」を防ぐには、tabindex を設定します。

<a href="..." tabindex="-1">

クリック時にクラス「無効」のリンクをマークします。

$('a').on('click', function(){ $(this).addClass('disabled') })

CSS を追加します。

a.disabled:after { position: absolute; content: ""; display: block; background: white; opacity: 0.5; // optional z-index: 999; left: 0; top: 0; bottom: 0; right: 0; } 

$('a').on('click', function(){ $(this).addClass('disabled') });
a.disabled:after {
    position: absolute;
    content: "";
    display: block;
    background: white;
    opacity: 0.5; // optional 
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a hreh="#" tabindex="-1">The Link</a>

于 2016-05-07T06:28:09.923 に答える