web-dev-qa-db-ja.com

Javascriptのリンク（「a」）オブジェクトのデフォルトの動作をオーバーライドする

私が達成しようとしていることがまったく可能かどうかはわかりません。特定のHTMLページのすべてのアンカーオブジェクト（Aタグ）のデフォルトの動作をオーバーライドしたいと思います。すべてのA要素をループして、body要素onclickメソッドから各要素にonload呼び出しを動的に追加できることはわかっていますが、探しています。より絶対的な解決策。私が必要としているのは、すべてのA要素にonclickアクションが割り当てられ、要素hrefプロパティを引数として渡すメソッドを呼び出すことです。

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

動的に：

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

私が言ったように、これを行う理想的な方法は、ドキュメントのロード時に何らかの方法でAnchorクラスを完全にオーバーライドすることです。それが不可能な場合は、すべてループスルーのA要素メソッドを使用します（これはすでに方法を知っています）。

javascriptdomoverridinganchor
22
boliva

すべてのアンカー要素を繰り返し処理したくない場合は、単純に 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
  }
};

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

37
CMS

JQueryの使用：

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

function someMethodName(href)
{
    console.log(href);
    return false;
}
7
Chris Fulstow
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>でラップすると、ページの読み込み時に実行されます。

4
Benji XVI

CMSのソリューションが最良のソリューションです。関数を参照するか、ベースアンカー/要素または宣言的にアンカー/要素に設定されたプロトタイププロパティ内に格納されている文字列から実行する必要があることを確認すると、パフォーマンスが向上することに注意してください。このプロパティを使用することで、あらゆる可能性に対して新しい決定ブランチを作成するのではなく、呼び出したい関数を1つの決定ブランチから見つけて呼び出すことができます。 1つまたは2つ以上のケースでcaseステートメントを壊したり使用したりする場合は、これを検討し始める必要があります。今日は、制御の反転とコーディングのインジェクションスタイルを見つけるのに適した日かもしれません。

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

これを完成させようとしているクライアントサイドルーターに取り組んでいる人が何人かいます。

0
alignedfibers

すべてのアンカー要素のonlickイベントをオーバーライドする方法はありません。ドキュメント本体にonclickを追加し、アンカー要素からさらに伝播されたかどうかを確認するロジックを作成し、その場合にイベントを実行できますが、このソリューションは、ページが複雑でクリックを伝播しない場合に問題を引き起こす可能性があります。ある場合には。

可能であれば、getElementsByTagNameソリューションを使用します。

0
Ben

Benji XVIの回答に似ていますが、querySelectorAllを使用します。たとえば、クラス 'container'のコンテナdiv内で、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')
  }
})
0
svnm