如何使用链接调用 JavaScript?

如何使用链接调用 JavaScript 代码?

430842 次浏览
小开 
<a href="javascript:alert('Hello!');">Clicky</a>

多年后编辑:不!永远不要这样做!我那时年轻又愚蠢!

一些人问你不应该这样做。原因如下:

  1. HTML应该专注于表示。把JS放在HREF中意味着你的HTML现在在处理业务逻辑。

  2. 安全:你的HTML中的Javascript违反了内容安全策略(CSP)。内容安全策略(CSP)是一个附加的安全层，有助于检测和减轻某些类型的攻击，包括跨站点脚本(XSS)和数据注入攻击。这些攻击被用于从窃取数据到破坏网站或分发恶意软件的所有事情。在这里阅读更多。

  3. 可访问性:锚标记用于链接到其他文档/页面/资源。如果你的链接不去任何地方，它应该是一个按钮。这使得屏幕阅读器、盲文终端等更容易确定正在发生什么，并为视障用户提供有用的信息。

小开

我认为你可以使用onclick事件，就像这样:

<a onclick="jsFunction();">
小开
最佳答案 
<a onclick="jsfunction()" href="#">

或

<a onclick="jsfunction()" href="javascript:void(0);">

编辑:

上面的回答真的不是一个很好的解决方案，自从我最初发表文章以来，我学到了很多关于JS的知识。请参阅下面的EndangeredMassa的回答以获得解决此问题的更好方法。

小开

或者，如果你正在使用PrototypeJS

<script type="text/javascript>
Event.observe( $('thelink'), 'click', function(event) {
//do stuff


Event.stop(event);
}
</script>


<a href="#" id="thelink">This is the link</a>
小开

不引人注目的JavaScript，没有库依赖:

<html>
<head>
<script type="text/javascript">


// Wait for the page to load first
window.onload = function() {


//Get a reference to the link on the page
// with an id of "mylink"
var a = document.getElementById("mylink");


//Set code to run when the link is clicked
// by assigning a function to "onclick"
a.onclick = function() {


// Your code here...


//If you don't want the link to actually
// redirect the browser to another page,
// "google.com" in our example here, then
// return false at the end of this block.
// Note that this also prevents event bubbling,
// which is probably what we want here, but won't
// always be the case.
return false;
}
}
</script>
</head>
<body>
<a id="mylink" href="http://www.google.com">linky</a>
</body>
</html>
小开

而且，为什么不使用jQuery不引人注目:

  $(function() {
$("#unobtrusive").click(function(e) {
e.preventDefault(); // if desired...
// other methods to call...
});
});

超文本标记语言

<a id="unobtrusive" href="http://jquery.com">jquery</a>
小开

不引人注目的Javascript有很多很多优点，下面是它需要的步骤以及为什么使用它很好。

  1. 链接正常加载:

    <a id="DaLink" href="http://host/toAnewPage.html">点击here</a>

这一点很重要，因为它可以在没有启用javascript的浏览器中工作，或者如果javascript代码中有错误无法工作。

  1. javascript运行在页面加载:

     window.onload = function(){
document.getElementById("DaLink").onclick = function(){
if(funcitonToCall()){
// most important step in this whole process
return false;
}
}
}

  2. if the javascript runs successfully, maybe loading the content in the current page with javascript, the return false cancels the link firing. in other words putting return false has the effect of disabling the link if the javascript ran successfully. While allowing it to run if the javascript does not, making a nice backup so your content gets displayed either way, for search engines and if your code breaks, or is viewed on an non-javascript system.

best book on the subject is "Dom Scription" by Jeremy Keith

小开

只需使用javascript:---- exemplale即可

javascript:var JFL_81371678974472 = new JotformFeedback({ formId: '81371678974472', base: 'https://form.jotform.me/', windowTitle: 'Photobook Series', background: '#e44c2a', fontColor: '#FFFFFF', type: 'false', height: 700, width: 500, openOnLoad: true })
小开

基于@mister_lucky答案使用jquery:

$('#unobtrusive').on('click',function (e) {
e.preventDefault(); //optional
//some code
});

Html代码:

<a id="unobtrusive" href="http://jquery.com">jquery</a>
小开

你可以像链接一样使用按钮和样式: HTML代码:< / p > 

button {
width:0.0000000001px;
height:0.00000000001px;
background-color: #ffffff;
color: Blue;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
}
<button  onclick="function()"><u>Example button</u></button>


提交答案