blocks|key|1479690|text|更简洁的是，我认为这比typical+href="#"、href="javascript:void"或href="whatever"更有意义：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1479691|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>|code-block|syntax|javascript|1479692|如果Javascript失败了，会有一些反馈。此外，消除了不稳定的行为(在href="#"的情况下是页面跳转，在href=""的情况下是访问相同的页面)。|1479693|entityMap^0|B|G|S|M|1F|F|0|0|11|8|1K|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

<p>Neater still, instead of the <code>typical href="#"</code> or <code>href="javascript:void"</code> or <code>href="whatever"</code>, I think this makes much more sense:</p>

<pre><code>var el = document.getElementById('foo');
el.onclick = showFoo;


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

&lt;a href="no-javascript.html" title="Get some foo!" id="foo"&gt;Show me some foo&lt;/a&gt;
</code></pre>

<p>If Javascript fails, there is some feedback. Furthermore, erratic behavior (page jumping in the case of <code>href="#"</code>, visiting the same page in the case of <code>href=""</code>) is eliminated.</p>


blocks|key|1265407|text|最简单的答案是...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1265408|​|1265409|<a+href="javascript:alert('You+clicked!')">My+link</a>|code-block|syntax|javascript|1265410|1265411|或者回答调用javascript函数的问题：|1265412|1265413|<script+type="text/javascript">
function+myFunction(myMessage)+{
++++alert(myMessage);
}
</script>

<a+href="javascript:myFunction('You+clicked!')">My+link</a>|1265414|1265415|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

<p>The simplest answer of all is...</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="javascript:alert('You clicked!')"&gt;My link&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>Or to answer the question of calling a javascript function:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
function myFunction(myMessage) {
    alert(myMessage);
}
&lt;/script&gt;

&lt;a href="javascript:myFunction('You clicked!')"&gt;My link&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1265064|text|使用onclick参数...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1265065|<a+href='http://www.google.com'+onclick='myJavaScriptFunction();'>mylink</a>|code-block|syntax|javascript|1265066|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>With the onclick parameter...</p>

<pre><code>&lt;a href='http://www.google.com' onclick='myJavaScriptFunction();'&gt;mylink&lt;/a&gt;
</code></pre>


blocks|key|1265308|text|JQuery答案。由于JavaScript是为了开发JQuery而发明的，因此我在JQuery中给出了一个这样做的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1265309|<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>|code-block|syntax|javascript|1265310|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The JQuery answer. Since JavaScript was invented in order to develop JQuery, I am giving you an example in JQuery doing this:</p>

<pre><code>&lt;div class="menu"&gt;
    &lt;a href="http://example.org"&gt;Example&lt;/a&gt;
    &lt;a href="http://foobar.com"&gt;Foobar.com&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
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 );
}
&lt;/script&gt;
</code></pre>


blocks|key|1479926|text|对于javascript超链接，我更喜欢使用onclick方法，而不是href。并始终使用警报来确定您拥有的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479927|<a+href='#'+onclick='jsFunction();alert('it+works!');'>Link</a>|offset|length|style|CODE|1479928|它也可以用在输入标签上，例如。|1479929|<input+type='button'+value='Submit'+onclick='jsFunction();alert('it+works!');'>|1479930|entityMap^0|0|0|1R|0|0|0|27|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

<p>I prefer using the onclick method rather than the href for javascript hyperlinks. And always use alerts to determine what value do you have.</p>

<p><code>&lt;a href='#' onclick='jsFunction();alert('it works!');'&gt;Link&lt;/a&gt;</code></p>

<p>It could be also used on input tags eg.</p>

<p><code>&lt;input type='button' value='Submit' onclick='jsFunction();alert('it works!');'&gt;</code></p>


blocks|key|1479762|text|理想情况下，我会避免在你的代码中生成链接，因为每次你想要更改每个链接的“标记”时，你的代码都需要重新编译。如果你必须这么做，我不会把你的javascript‘call’嵌入到你的HTML中，这完全是一个糟糕的做法，你的标记应该描述你的文档而不是它做了什么，这是你的javascript的工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479763|使用这样一种方法，即为每个元素(或类，如果其共同功能)具有特定的id，然后使用渐进式增强来添加事件处理程序，如下所示：|1479764|[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;
++++}|code-block|syntax|javascript|1479765|这样，对于禁用了JS的用户，您的代码就不会中断，并且它将具有清晰的关注点分离。|1479766|希望这能派上用场。|1479767|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Ideally I would avoid generating links in you code behind altogether as your code will need recompiling every time you want to make a change to the 'markup' of each of those links. If you have to do it I would not embed your javascript 'calls' inside your HTML, it's a bad practice altogether, your markup should describe your document not what it does, thats the job of your javascript.</p>

<p>Use an approach where you have a specific id for each element (or class if its common functionality) and then use Progressive Enhancement to add the event handler(s), something like:</p>

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

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

// do some stuff here

    return false;
    }
</code></pre>

<p>That way your code won't break for users with JS disabled and it will have a clear seperation of concerns.</p>

<p>Hope that is of use.</p>


blocks|key|1265253|text|我通常推荐使用element.attachEvent+(IE)或element.addEventListener+(其他浏览器)而不是直接设置onclick事件，因为后者将替换该元素的任何现有事件处理程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1265254|attachEvent+/+addEventListening允许创建多个事件处理程序。|1265255|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I would generally recommend using element.attachEvent (IE) or element.addEventListener (other browsers) over setting the onclick event directly as the latter will replace any existing event handlers for that element.</p>

<p>attachEvent / addEventListening allow multiple event handlers to be created.</p>


blocks|key|1480026|text|如果您不等待页面加载，您将不能通过id选择元素。这个解决方案应该适用于任何在执行代码时遇到问题的人|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1480027|<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>|code-block|syntax|javascript|1480028|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you do not wait for the page to be loaded you will not be able to select the element by id. This solution should work for anyone having trouble getting the code to execute </p>

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

    function myFunction() {
        //your code goes here
        alert('Alert message here');
    }
};
&lt;/script&gt;

&lt;a href='#' id='delete'&gt;Delete Document&lt;/a&gt;
</code></pre>


<p>I am dynamically creating a hyperlink in the c# code behind file of ASP.NET. I need to call a JavaScript function on client click. how do i accomplish this?</p>


call javascript function on hyperlink click

jQuery

我在ASP.NET的c#代码隐藏文件中动态创建了一个超链接。我需要在客户端点击时调用一个JavaScript函数。我该如何做到这一点？

问单击超链接时调用javascript函数
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击超链接时调用javascript函数EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击超链接时调用javascript函数
EN