web-dev-qa-db-ja.com

クリックイベントを要素に追加するにはどうすればよいですか？

このような要素に（jQueryを使用せずに）プレーンJavaScriptでクリックイベントを追加したいので、idではなくクラスがあります：

<a href="http://example.com/share" class="MyClass">Yummy</a>
javascriptonclickclickdom-events
9
user603007

IDがなく、セレクタライブラリがなく、古いブラウザで機能させたい場合は、もう少し作業が必要です。 IDを付けることができれば、それは非常に簡単です。そうでない場合は、より多くのコードが必要です。

var links = document.getElementsByClassName("MyClass");
links[0].onclick = function() {
    // put your click handling code here
    // return(false) if you don't want default click behavior for the link
}

getElementsByClassNameは古いブラウザでは普遍的に利用できないため、存在しない場合はシムを実装する必要があります。または、次の方法でドキュメント内のすべてのリンクを取得できます。

var links = document.getElementsByTagName("a");

次に、必要なリストが見つかるまでそのリストを循環します（おそらくクラス名を確認します）。

リンクにIDを付けることができる場合：

<a href="http://braza.com/share" id="specialLink" class="MyClass" >Yummy</a>

次に、次のコードを使用します。

document.getElementById("specialLink").onclick = function() {
    // add code here
}

これを定期的に行う場合、イベントリスナーの追加は、onclickプロパティを使用するよりも少し拡張性がありますが、フレームワークがない場合は、古いバージョンを処理するイベントリスナーを追加するための関数が必要です。 IEの。

10
jfriend00

これを行うにはいくつかの方法があります。

1つは、アンカーにクリックイベントを追加することです。

として：<a href='' onclick='yourFunct()'> Yummy </a>

もう1つの方法は、document.getElementsByTagName（ 'a'）を使用して、すべてのhrefの参照を配列として取得し、その特定のhrefを選択してクリックイベントを追加することです。

のように：document.getElementsByTagName('a')[0].click = function(){ }

ここで、0は、そのインデックスを指定できる配列内の正確な場所を知っている場合、単にシンボリックです。

3番目の方法は、カスタムを作成することです。 javascriptのdocument.getElementsByClassName関数を使用して、同様に使用します。 googleを検索すると、getElementsByClassNameの実装がいくつか見つかります。

http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ 実装の1つを見てください。

4
sushil bharwani

以下のように簡単に使用できます

<a href="http://braza.com/share" class="MyClass" onclick='return somefunction()'>Yummy</a>

<script>

function somefunction()
{
 // do your stuff.
// return true, if you want to open the link, or false to cancel
return true;
}

</script>
0
AjayR