web-dev-qa-db-ja.com

ハイパーリンクのクリックでJavaScript関数を呼び出す

ASP.NETのc＃コードビハインドファイルにハイパーリンクを動的に作成しています。クライアントのクリック時にJavaScript関数を呼び出す必要があります。どうすればこれを達成できますか？

javascripthyperlink
81
ErnieStings

それでも、typical href="#"またはhref="javascript:void"またはhref="whatever"の代わりに、これはもっと理にかなっていると思います。

var el = document.getElementById('foo');
el.onclick = showFoo;


function showFoo() {
  alert('I am foo!');
  return false;
}

<a href="no-javascript.html" title="Get some foo!" id="foo">Show me some foo</a>

Javascriptが失敗した場合、フィードバックがあります。さらに、不安定な動作（href="#"の場合はページジャンプ、href=""の場合は同じページへのアクセス）が排除されます。

123
karim79

すべての最も簡単な答えは...

<a href="javascript:alert('You clicked!')">My link</a>

または、javascript関数を呼び出すという質問に答えるには：

<script type="text/javascript">
function myFunction(myMessage) {
    alert(myMessage);
}
</script>

<a href="javascript:myFunction('You clicked!')">My link</a>
51
Jayden Lawson

Onclickパラメータを使用して...

<a href='http://www.google.com' onclick='myJavaScriptFunction();'>mylink</a>
25
amischiefr

JQueryの答え。 JavaScriptはJQueryを開発するために発明されたので、これを行うJQueryの例を示します。

<div class="menu">
    <a href="http://example.org">Example</a>
    <a href="http://foobar.com">Foobar.com</a>
</div>

<script>
jQuery( 'div.menu a' )
    .click(function() {
        do_the_click( this.href );
        return false;
    });

// play the funky music white boy
function do_the_click( url )
{
    alert( url );
}
</script>
12
elcuco

JavaScriptハイパーリンクのhrefよりもonclickメソッドを使用することを好みます。また、常にアラートを使用して、どのような価値があるかを判断してください。

<a href='#' onclick='jsFunction();alert('it works!');'>Link</a>

入力タグなどにも使用できます。

<input type='button' value='Submit' onclick='jsFunction();alert('it works!');'>

4
Marky

理想的には、各リンクの「マークアップ」を変更するたびにコードを再コンパイルする必要があるため、コードビハインドでリンクを生成しないようにします。あなたがそれをしなければならない場合、私はあなたのJavascriptにあなたのjavascript「呼び出し」を埋め込みません、それは悪い習慣です。

各要素（またはその共通機能の場合はクラス）に特定のIDがあるアプローチを使用し、次にProgressive Enhancementを使用してイベントハンドラーを追加します。

[c# example only probably not the way you're writing out your js]
Response.Write("<a href=\"/link/for/javascriptDisabled/Browsers.aspx\" id=\"uxAncMyLink\">My Link</a>");

[Javascript]  
document.getElementById('uxAncMyLink').onclick = function(e){

// do some stuff here

    return false;
    }

そうすれば、JSが無効になっているユーザーに対してコードが破損することはなく、懸念事項が明確に分離されます。

それが役に立つことを願っています。

3
Lewis

通常、onclickイベントを直接設定するよりもelement.attachEvent（IE）またはelement.addEventListener（他のブラウザー）を使用することをお勧めします。後者はその要素の既存のイベントハンドラーを置き換えるからです。

attachEvent/addEventListeningを使用すると、複数のイベントハンドラーを作成できます。

2
Simon

onclick HTML属性 を使用します。

onclickイベントハンドラーは、onclick属性が適用される要素上のユーザーのマウスボタンからクリックイベントをキャプチャします。通常、このアクションの結果、JavaScript関数などのスクリプトメソッドが呼び出されます[...]

1
Donut

ページがロードされるのを待たないと、IDで要素を選択できなくなります。このソリューションは、実行するコードの取得に問題がある人に有効です。

<script type="text/javascript">
window.onload = function() {
    document.getElementById("delete").onclick = function() {myFunction()};

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
</script>

<a href='#' id='delete'>Delete Document</a>
0
user2197701