admin管理员组文章数量:1304686
I found that onclick function must return false for proceeding with href value and true for blocking the same . I used the same here too . on returning false , it is right , proceeding with URL but on returning true , it is also opening the URL page .
So what is different between returning true / false value from onclick function .
I am using Firefox 9.0.1 and IE 7 . . Following is my html file .
<html>
<head>
<script language="JavaScript" type="text/javascript">
function clickthis()
{
alert("its onclick Function call ");
return true;
}
</script>
</head>
<body >
<a id="foo" onclick="clickthis();" href="">google</a>
</body>
</html>
I got confused with this behaviour .
I found that onclick function must return false for proceeding with href value and true for blocking the same . I used the same here too . on returning false , it is right , proceeding with URL but on returning true , it is also opening the URL page .
So what is different between returning true / false value from onclick function .
I am using Firefox 9.0.1 and IE 7 . . Following is my html file .
<html>
<head>
<script language="JavaScript" type="text/javascript">
function clickthis()
{
alert("its onclick Function call ");
return true;
}
</script>
</head>
<body >
<a id="foo" onclick="clickthis();" href="http://google.">google</a>
</body>
</html>
I got confused with this behaviour .
Share Improve this question edited Jan 20, 2012 at 12:58 Virendra asked Jan 20, 2012 at 12:40 VirendraVirendra 3871 gold badge7 silver badges15 bronze badges 2-
your onclick should read
onclick="return clickthis();", but @Lolo has the right solution – JamesHalsall Commented Jan 20, 2012 at 12:48 - Look into a JavaScript library like jQuery, so you can attach events instead of hard-coding them. It's easier to maintain, and more accessible. – Dan Blows Commented Jan 20, 2012 at 12:50
5 Answers
Reset to default 4The event handler needs to return false to prevent normal link action, and it is not suffient to just call a function; the handler itself needs to return the value false if you wish to suppress the action. So the attribute should be
onclick="return clickthis();"
You should use preventDefault method on event object.
Example: http://jsfiddle/lolo/vD5hK/
[TESTED with Firefox 35.0.1]
I made some solution for it. In case of anchor detected, with href defined, the click take over and redirect the page.
code:
<html><title></title><body>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
function clickthis(e, obj)
{
console.log('click');
e.preventDefault();
$.ajax({url: "a.html",
success: function(result){
console.log('ajax success');
makeRedirect(obj);
},
error: function(result){
console.log('ajax error');
makeRedirect(obj);
}
});
}
function makeRedirect(obj){
if (obj && obj.tagName == 'A' && obj.href){
console.log('redirecting');
window.location = obj.href;
}
}
</script>
<a id="foo" onclick="clickthis(event,this);" href="http://www.google.">###3 google 3###</a>
</body></html>
note: u can even make the redirect once all your asynchronous logic finished...
You need to use onclick="return clickthis();" and clickthis() has to return false.
If you're going for progressive enhancement (i.e. going to google. if the user doesn't have javascript enabled, showing the alert if they do), then you want your markup to look like this:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function clickthis(e)
{
e.preventDefault();
alert("its onlcick Function call ");
return false;
}
</script>
</head>
<body >
<a id="foo" onclick="clickthis(event);" href="http://google.">google</a>
</body>
</html>
版权声明：本文标题：javascript - Onclick function is not blocking the HREF value of anchor tagon returning true- Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741792846a2397759.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论