How to call javascript from a href?
如何从href调用javascript ?
like:
如:
<a href="<script type='text/javascript'>script code</script>/">Call JavaScript</a>
11 个解决方案
#1
27
<a onClick="yourFunction(); return false;" href="fallback.html">One Way</a>
<一个onclick = " yourfunction();返回false;" href="撤退。html "> < / >的一种方式
** Edit **
From the flurry of comments, I'm sharing the resources given/found.
** *编辑** *从一连串的评论中,我正在分享所给/找到的资源。
Previous SO Q and A's:
之前的SO Q和A:
- Do you ever need to specify 'javascript:' in an onclick? (and the IE related A's following)
- 你是否需要在onclick中指定'javascript:' ?(与IE有关的A如下)
- javascript function in href vs onclick
- javascript函数在href vs onclick。
Interesting reads:
有趣的读取:
- http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html
- http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html
- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/label
- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/label
#2
15
<a href="javascript:call_func();">...</a>
where the function then has to return false so that the browser doesn't go to another page.
然后函数必须返回false,这样浏览器就不会访问另一个页面。
But I'd recommend to use jQuery (with $(...).click(function () {}))
)
但是我建议使用jQuery(带有$(…))。点击(函数(){ })))
#3
10
The proper way to invoke javascript code when clicking a link would be to add an onclick
handler:
单击链接时调用javascript代码的正确方法是添加onclick处理程序:
<a href="#" onclick="myFunction()">LinkText</a>
Although an even "more proper" way would be to get it out of the html all together and add the handler with another javascript when the dom is loaded.
尽管“更合适”的方法是将它从html中提取出来,并在加载dom时添加另一个javascript处理程序。
#4
3
JavaScript code is usually called from the onclick
event of a link. For example, you could instead do:
JavaScript代码通常从链接的onclick事件调用。例如,你可以这样做:
In Head Section of HTML Document
在HTML文档的头部部分
<script type='text/javascript'>
function myFunction(){
//...script code
}
</script>
In Body of HTML Document
在HTML文档的主体
<a href="#" id="mylink" onclick="myFunction(); return false">Call JavaScript </a>
Alternatively, you can also attach your function to the link using the links' ID, and HTML DOM or a framework like JQuery.
另外,还可以使用链接的ID、HTML DOM或JQuery之类的框架将函数附加到链接上。
For example:
例如:
In Head Section of HTML Document
在HTML文档的头部部分
<script type='text/javascript'>
document.getElementById("mylink").onclick = function myFunction(){ ...script code};
</script>
In Body of HTML Document
在HTML文档的主体
<a href="#" id="mylink">Call JavaScript </a>
#5
2
Using JQuery would be good;
使用JQuery会很好;
<a href="#" id="youLink">Call JavaScript </a>
$("#yourLink").click(function(e){
//do what ever you want...
});
#6
2
I would avoid inline javascript altogether, and as I mentioned in my comment, I'd also probably use <input type="button" />
for this. That being said...
我将完全避免使用内联javascript,正如我在注释中提到的,我也可能会使用。那就是说……
<a href="http://*.com/questions/16337937/how-to-call-javascript-from-a-href" id="mylink">Link.</a>
var clickHandler = function() {
alert('Stuff happens now.');
}
if (document.addEventListener) {
document.getElementById('mylink').addEventListener('click', clickHandler, false);
} else {
document.getElementById('mylink').attachEvent('click', clickHandler);
}
http://jsfiddle.net/pDp4T/1/
#7
2
Not sure why this worked for me while nothing else did but just in case anyone else is still looking...
不知道为什么这对我起作用,而其他的都没有,只是以防其他人还在看……
In between head tags:
在头部标签:
<script>
function myFunction() {
script code
}
</script>
Then for the < a > tag:
那么对于< a >标签:
<a href='' onclick='myFunction()' > Call Function </a>
#8
1
If you only want to process a function and not process the href it self, add the return false statement at the end of your function:
如果您只想处理一个函数而不处理href本身,请在函数末尾添加return false语句:
<a href="#" onclick="javascript: function() {... ; return false} return false">click</>
#9
1
another way is :
另一种方法是:
<a href="javascript:void(0);" onclick="alert('testing')">
#10
0
Edit This will create a link with Edit after clicking on editing a function name as edit will be called.
点击编辑将会调用编辑的函数名后,将会创建一个带有编辑的链接。
#11
0
<a href="javascript:
console.dir(Object.getOwnPropertyDescriptors(HTMLDivElement))">
1. Direct Action Without Following href Link
</a>
<br><br>
<a href="javascript:my_func('http://diasmath.blogg.org')">
2. Indirect Action (Function Call) Without Following Normal href Link
</a>
<br><br>
<!-- Avec « return false » l'action par défaut de l'élément
// <a></a> (ouverture de l'URL pointée par
// « href="http://www.centerblog.net/gha" »)
// ne s'exécute pas.
-->
<a target=_new href="http://www.centerblog.net/gha"
onclick="my_func('http://diasmath.blogg.org');
return false">
3. Suivi par défaut du Lien Normal href Désactivé avec
« return false »
</a>
<br><br>
<!-- Avec ou sans « return true » l'action par défaut de l'élément
// s'exécute pas.
-->
<a target=_new href="http://gha.centerblog.net"
onclick="my_func('http://diasmath.blogg.org');">
4. Suivi par défaut du Lien Normal href Conservé avec ou sans
« return true » qui est la valeur retournée par défaut.
</a>
<br><br>
<!-- Le diese tout seul ne suit pas le lien href. -->
<a href="#" onclick="my_func('http://diasmath.blogg.org')">
5. Lien Dièse en Singleton (pas de suivi href)
</a>
<script language="JavaScript">
function my_func(s) {
console.dir(Object.getOwnPropertyDescriptors(Document));
window.open(s)
}
</script>
<br>
<br>
<!-- Avec GESTION D'ÉVÉNEMENT.
// Événement (event) = click du lien
// Event Listener = "click"
// my_func2 = gestionnaire d'événement
-->
<script language="JavaScript">
function my_func2(event) {
console.dir(event);
window.open(event.originalTarget["href"])
}
</script>
<a target=_blank href="http://dmedit.centerblog.net"
id="newel" onclick="return false">
6. By specifying another eventlistener
(and deactivating the default).
</a>
<script language="JavaScript">
let a=document.getElementById("newel");
a.addEventListener("click",my_func2)
</script>
#1
27
<a onClick="yourFunction(); return false;" href="fallback.html">One Way</a>
<一个onclick = " yourfunction();返回false;" href="撤退。html "> < / >的一种方式
** Edit **
From the flurry of comments, I'm sharing the resources given/found.
** *编辑** *从一连串的评论中,我正在分享所给/找到的资源。
Previous SO Q and A's:
之前的SO Q和A:
- Do you ever need to specify 'javascript:' in an onclick? (and the IE related A's following)
- 你是否需要在onclick中指定'javascript:' ?(与IE有关的A如下)
- javascript function in href vs onclick
- javascript函数在href vs onclick。
Interesting reads:
有趣的读取:
- http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html
- http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html
- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/label
- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/label
#2
15
<a href="javascript:call_func();">...</a>
where the function then has to return false so that the browser doesn't go to another page.
然后函数必须返回false,这样浏览器就不会访问另一个页面。
But I'd recommend to use jQuery (with $(...).click(function () {}))
)
但是我建议使用jQuery(带有$(…))。点击(函数(){ })))
#3
10
The proper way to invoke javascript code when clicking a link would be to add an onclick
handler:
单击链接时调用javascript代码的正确方法是添加onclick处理程序:
<a href="#" onclick="myFunction()">LinkText</a>
Although an even "more proper" way would be to get it out of the html all together and add the handler with another javascript when the dom is loaded.
尽管“更合适”的方法是将它从html中提取出来,并在加载dom时添加另一个javascript处理程序。
#4
3
JavaScript code is usually called from the onclick
event of a link. For example, you could instead do:
JavaScript代码通常从链接的onclick事件调用。例如,你可以这样做:
In Head Section of HTML Document
在HTML文档的头部部分
<script type='text/javascript'>
function myFunction(){
//...script code
}
</script>
In Body of HTML Document
在HTML文档的主体
<a href="#" id="mylink" onclick="myFunction(); return false">Call JavaScript </a>
Alternatively, you can also attach your function to the link using the links' ID, and HTML DOM or a framework like JQuery.
另外,还可以使用链接的ID、HTML DOM或JQuery之类的框架将函数附加到链接上。
For example:
例如:
In Head Section of HTML Document
在HTML文档的头部部分
<script type='text/javascript'>
document.getElementById("mylink").onclick = function myFunction(){ ...script code};
</script>
In Body of HTML Document
在HTML文档的主体
<a href="#" id="mylink">Call JavaScript </a>
#5
2
Using JQuery would be good;
使用JQuery会很好;
<a href="#" id="youLink">Call JavaScript </a>
$("#yourLink").click(function(e){
//do what ever you want...
});
#6
2
I would avoid inline javascript altogether, and as I mentioned in my comment, I'd also probably use <input type="button" />
for this. That being said...
我将完全避免使用内联javascript,正如我在注释中提到的,我也可能会使用。那就是说……
<a href="http://*.com/questions/16337937/how-to-call-javascript-from-a-href" id="mylink">Link.</a>
var clickHandler = function() {
alert('Stuff happens now.');
}
if (document.addEventListener) {
document.getElementById('mylink').addEventListener('click', clickHandler, false);
} else {
document.getElementById('mylink').attachEvent('click', clickHandler);
}
http://jsfiddle.net/pDp4T/1/
#7
2
Not sure why this worked for me while nothing else did but just in case anyone else is still looking...
不知道为什么这对我起作用,而其他的都没有,只是以防其他人还在看……
In between head tags:
在头部标签:
<script>
function myFunction() {
script code
}
</script>
Then for the < a > tag:
那么对于< a >标签:
<a href='' onclick='myFunction()' > Call Function </a>
#8
1
If you only want to process a function and not process the href it self, add the return false statement at the end of your function:
如果您只想处理一个函数而不处理href本身,请在函数末尾添加return false语句:
<a href="#" onclick="javascript: function() {... ; return false} return false">click</>
#9
1
another way is :
另一种方法是:
<a href="javascript:void(0);" onclick="alert('testing')">
#10
0
Edit This will create a link with Edit after clicking on editing a function name as edit will be called.
点击编辑将会调用编辑的函数名后,将会创建一个带有编辑的链接。
#11
0
<a href="javascript:
console.dir(Object.getOwnPropertyDescriptors(HTMLDivElement))">
1. Direct Action Without Following href Link
</a>
<br><br>
<a href="javascript:my_func('http://diasmath.blogg.org')">
2. Indirect Action (Function Call) Without Following Normal href Link
</a>
<br><br>
<!-- Avec « return false » l'action par défaut de l'élément
// <a></a> (ouverture de l'URL pointée par
// « href="http://www.centerblog.net/gha" »)
// ne s'exécute pas.
-->
<a target=_new href="http://www.centerblog.net/gha"
onclick="my_func('http://diasmath.blogg.org');
return false">
3. Suivi par défaut du Lien Normal href Désactivé avec
« return false »
</a>
<br><br>
<!-- Avec ou sans « return true » l'action par défaut de l'élément
// s'exécute pas.
-->
<a target=_new href="http://gha.centerblog.net"
onclick="my_func('http://diasmath.blogg.org');">
4. Suivi par défaut du Lien Normal href Conservé avec ou sans
« return true » qui est la valeur retournée par défaut.
</a>
<br><br>
<!-- Le diese tout seul ne suit pas le lien href. -->
<a href="#" onclick="my_func('http://diasmath.blogg.org')">
5. Lien Dièse en Singleton (pas de suivi href)
</a>
<script language="JavaScript">
function my_func(s) {
console.dir(Object.getOwnPropertyDescriptors(Document));
window.open(s)
}
</script>
<br>
<br>
<!-- Avec GESTION D'ÉVÉNEMENT.
// Événement (event) = click du lien
// Event Listener = "click"
// my_func2 = gestionnaire d'événement
-->
<script language="JavaScript">
function my_func2(event) {
console.dir(event);
window.open(event.originalTarget["href"])
}
</script>
<a target=_blank href="http://dmedit.centerblog.net"
id="newel" onclick="return false">
6. By specifying another eventlistener
(and deactivating the default).
</a>
<script language="JavaScript">
let a=document.getElementById("newel");
a.addEventListener("click",my_func2)
</script>