javascript - e.preventDefault(); のプレーンな JavaScript バージョン。

Question

次の jQuery ベースのスクリプトを使用すると、ダミー リンクのデフォルト アクションを停止できます。<a href="#">

$('a').click(function(e) {
  e.preventDefault();
});

このスクリプトのプレーン バニラ バージョンは何でしょうか?

私は JavaScript プログラマーではありませんが、return false;. 繰り返しますが、私は完全に間違っているかもしれません。

よろしくお願いします。

Answer 1

バニラ JavaScript でもevent.preventDefault()を使用できます。一般的な方法では、いつでも使用できますreturn false。onclickイベント ハンドラーをアタッチすると、要素の やその他の属性を使用するのではなく、ハンドラーに渡されるイベント引数を取得することが保証されます(この場合、ハンドラー側で使用可能な特定のイベント オブジェクトに依存する必要がありますが、これは使用できない可能性があります)。使用する IE のように、すべてのブラウザーで取得しますwindow.event)。

元： -

  document.getElementById('someId').addEventListener('click', function(e){ //say this is an anchor
         //do something
        e.preventDefault();
   });

したがって、すべてのアンカーについて：

 var anchors = document.getElementsByTagName('a');
 for(i=0, len=anchors.length; i<len; i++){
     anchors[i].addEventListener('click', function(e){e.preventDefault();});
 }

Answer 2

// Like $('a'), gets all the <a> elements in the document.
var aElements = document.getElementsByTagName('a');
// Create one function object instead of one per <a> element.
// The calling convention is the same for jQuery as for regular JS.
function preventDefaultListener(e) { e.preventDefault(); }
// For each a element,
for (var i = 0, n = aElements.length; i < n; ++i) {
  // register the listener to be fired on click.
  aElements[i].addEventListener('click', preventDefaultListener);
}

Answer 3

はい、使用できますreturn false;

<a href="" onclick="return false;">test</a>

Answer 4

false を返す方法です。たとえば、アンカーが既に href を持っている場合:

<a href="http://www.google.com" onclick="alert('clicked!');return false">Click me</a>

このように onclick を呼び出すと、関数は実行されますが、ナビゲーションは実行されません。

Answer 5

@Ricardoあなたは正しいです。

上記の要素のデフォルト アクションを無効にするだけでなくreturn false、バ​​ブリングも防止します。

 e.preventDefault();
 e.stopPropagation();

に等しい

return false;

あなたが決める ：）