Preventdefault() が有効になるのを防ぐ方法

default() の有効化を防ぐ方法: 1. イベント プロキシを使用します。イベント プロキシは、親要素にイベント リスナーを追加し、イベント バブリングを通じて子要素のイベントをトリガーするテクノロジーです。デフォルトを変更または阻止します。イベントのバブリング中のイベントの動作 2. フラグ変数 同じイベント ハンドラー内の条件に基づいてイベントのデフォルトの動作をブロックするかどうかを決定する必要がある場合は、フラグ変数を使用して、preventDefault( ) メソッドの呼び出し。

ブラウザでは、イベントのデフォルト動作を防ぐために、preventDefault() メソッドがよく使用されます。たとえば、ブラウザーにデフォルトのナビゲーションやフォーム送信動作を実行させるのではなく、リンクのクリックやフォーム送信の動作をカスタマイズしたい場合に、このメソッドを使用できます。

ただし、preventDefault() メソッドが有効になるのを防ぎたい場合は、より複雑なテクニックを使用する必要がある場合があります。これは、JavaScript には、preventDefault() の動作を元に戻したりオーバーライドしたりする直接的な方法がないためです。 。

1. イベント プロキシを使用する

イベント プロキシは、親要素にイベント リスナーを追加し、イベント バブリングを通じて子要素のイベントをトリガーするメソッドです。テクノロジー。こうすることで、イベントのバブルアップ中にイベントのデフォルトの動作を変更したり阻止したりできます。

これは簡単な例です:

document.body.addEventListener('click', function(event) {  
  if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Prevent Default') {  
    event.stopPropagation();  // 阻止事件冒泡，从而阻止默认行为  
  }  
});  
  
document.body.innerHTML = &#39;<button>Prevent Default</button><div>Some content</div>&#39;;

この例では、ボタンをクリックすると、ブラウザはデフォルトのクリック動作 (リンクへの移動やフォームの送信など) をトリガーしようとします。しかし、イベントが発生している間にイベントの伝播をブロックしたため、デフォルトの動作はトリガーされませんでした。

ただし、このメソッドは、preventDefault() メソッドを呼び出したイベントのデフォルト動作を防止しません。 PreventDefault() メソッドはイベント ハンドラーで呼び出されるため、イベント ハンドラーの実行が完了すると、イベントはブロックされます。イベント ハンドラーの実行後は、この結果を変更することはできません。

2.フラグ変数

同じイベント ハンドラー内の条件に基づいてイベントのデフォルトの動作をブロックするかどうかを決定する必要がある場合場合によっては、preventDefault() メソッドの呼び出しを制御するために、フラグ変数を使用する必要があります。例:

var preventDefault = false;  
  
document.body.addEventListener('click', function(event) {  
  if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Prevent Default') {  
    preventDefault = true;  
  } else if (preventDefault) {  
    event.preventDefault();  
  }  
});  
  
document.body.innerHTML = &#39;<button>Prevent Default</button><div>Some content</div>&#39;;

この例では、ボタンをクリックすると、preventDefault 変数が true に設定されます。その後、イベント ハンドラーが他の要素を処理するときに、preventDefault 変数の値をチェックし、必要に応じてPreventDefault() メソッドを呼び出します。こうすることで、同じイベント ハンドラー内の条件に基づいてイベントのデフォルトの動作を防ぐことができます。

以上がPreventdefault() が有効になるのを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。