2017-03-16 2 views
0

私はかなりevent.preventDefault()は、ブラウザのイベントによって引き起こされるデフォルトの動作を防止することを理解していますしかし、この定義は私のために広すぎます例えば、イベントのデフォルトの動作ブラウザ?開発者がevent.preventDefault()を使用するのはかなり一般的ですが、私はまだ彼らがどのような振る舞いをしているのか理解していません。`event.preventDefault()`によって防止される `browser default behavior`の例は何ですか?

おかげ

+1

たとえば、ファイルアップロードアプリケーションをドラッグアンドドロップする場合は、ブラウザがアプリケーションにドロップされたファイルを開くのを止めたい –

答えて

3

あなたがそのようなhttp://example.comのように、リンクをクリックすると、ブラウザのデフォルトの動作はhttp://example.comにあなたを取ることになります。

クリックハンドラでpreventDefaultを使用すると、ブラウザはウィンドウの場所を変更しなくなります。

document.querySelector('.prevent-default').addEventListener('click', function (e) { 
 
    e.preventDefault(); 
 
}, false);
<a href="http://example.com">Normal Example</a> 
 
<a class="prevent-default" href="http://example.com">Prevented Example</a>

他の例には、

  • submitフォーム送信に関連付けられた
  • mousedown
  • ​​入力
  • が関連付けられているテキストの選択に関連しています
  • touchstartには、関連するスクロール/ズーム動作が含まれている場合があります。
1

簡単な例がclickイベントです。例えば、あなたが、あなたはそれが/my-sub-page.htmlページが表示されます。このリンクをクリックしたときになります

<a href="/my-sub-page.html" class='ajax-link'> 

デフォルトの動作のようなタグがあるとしましょう。ただし、ページの更新を避けたい場合は、代わりにajaxを使用します。

$('.ajax-link').on('click', function(event){ 
    event.preventDefault(); 
    $.ajax({ 
    url : $(this).attr('href'), 
    success : function(response){ 

     $('.my-content').html(response); 
     } 
    }) 
}); 

または別の例を送信することができます。上記と同様に、フォーム提出のデフォルト動作を防止し、ページをロードせずにajaxを使用してポストリクエストから結果を取得することができます。

0

event.preventDefault()メソッドは、要素のデフォルト動作を停止します。例えば

  • 防止を防ぐ
  • URL

かどうかをチェックするためにevent.isDefaultPrevented()メソッドを使用しますが、次からのリンクをフォームの送信から送信ボタンイベントのpreventDefault()メソッドが呼び出されました。

関連する問題