JavaScript（ja）のリンク（ 'a'）オブジェクトのデフォルトの動作をオーバーライドします

Question

私が達成しようとしていることがまったくできないかどうかわかりません。指定したHTMLページのすべてのアンカーオブジェクト（Aタグ）のデフォルトの動作を変更したいと思います。私はすべてのA要素をループし、body要素onloadメソッドからそれぞれonclick呼び出しを動的に追加することができますが、もっと絶対的な解決策を探しています。

<a href="http://domain.tld/page.html"> 

が動的になった：

<a href="http://domain.tld/page.html" onclick="someMethodName('http://domain.tld/page.html'); return false;"> 

私のように何が必要なのは、すべてのAの要素が引数として要素hrefプロパティを渡すメソッドを呼び出すonclickアクションを割り当てたので、下記の取得ということですこれを行う理想的な方法は、ドキュメントが読み込まれたときにアンカークラスをオーバーライドすることです。それが不可能な場合は、ループスルーすべてのA要素メソッド（私はすでに方法を知っています）に頼ります。

Answer 1

すべてのあなたのアンカー要素を反復処理したくない場合は、単にたとえば、event delegationを使用することができます。

document.onclick = function (e) { 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    if (element.tagName == 'A') { 
    someFunction(element.href); 
    return false; // prevent default action and stop event propagation 
    } 
}; 

上記の例hereを確認してください。

Answer 2

window.onload = function() { 
    var anchorElements = document.getElementsByTagName('a'); 
    for (var i in anchorElements) 
     anchorElements[i].onclick = function() { 
      alert(this.href); 
      return false; 
     } 
} 

これは、最も簡単な方法です。文書の先頭にある<script type="text/javascript">...</script>を折り返してください。ページが読み込まれると実行されます。

Answer 3

onlickイベントのすべてのアンカー要素をオーバーライドする方法はありません。ドキュメント本体にonclickを追加し、偶数要素からアンカー要素まで伝播したかどうかを確認し、その場合はイベントを実行するロジックを持つことができますが、ページが複雑でクリック数を増やさないある場合には。

実現可能であれば、私はgetElementsByTagNameソリューションに固執します。 jQueryのを使用して

Answer 4

：あなたが処理する必要が複数のイベントがある場合に

$(function() { 
    $("a").click(function() { 
     return someMethodName($(this).attr('href')); 
    }); 
}); 

function someMethodName(href) 
{ 
    console.log(href); 
    return false; 
} 

Answer 5

は、ケースを使用しないでください。代わりに文字列合成を使用して、呼び出す必要のある関数へのパスを構築します。これには、作成するデフォルトと文字列を定義する "A"要素にプロトタイプを追加する必要があります。要素のデータ属性は、デフォルトをオーバーライドできる必要があります。基本的には、メッセージとアクションをデフォルトで渡し、マークアップ内で宣言的に変更するだけです。指定されたアクションは、APIまたは他のアクセス可能なライブラリ関数としてどこかに公開され、lib ['funName']によって呼び出すことができます。それに属性を付けてください。名前やIDの心配はありません。プロトタイプと属性はデバウンスに便利です。デバウンスする必要があるからです。

Answer 6

Benji XVIの回答に似ていますが、たとえばquerySelectorAllを使用しています。たとえば、コンテナdivで、クラス 'container'で、es6を使用しています。

const $elems = document.querySelectorAll('.container a') 
var elems = Array.from($elems) 
elems.map(a => { 
    a.onclick = (e) => { 
    e.preventDefault() 
    window.alert('Clicking external links is disabled') 
    } 
})