logo标签列表

点击函数不会阻止锚标签的HREF值，在返回true时。

javascripthtml
3

我发现onclick函数必须返回false才能继续使用href值，返回true则会阻止相同操作。我在这里也是这样使用的。如果返回false，则执行正确，继续使用URL，但是如果返回true，则也会打开URL页面。

那么从onclick函数返回true/false值之间有什么区别呢？

我正在使用Firefox 9.0.1和IE 7。以下是我的html文件。

<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.com">google</a>
 </body>
</html>

我对这种行为感到困惑。

你的onclick应该写成onclick="return clickthis();", 但是@Lolo有正确的解决方案。 - JamesHalsall
看看像jQuery这样的JavaScript库，这样你就可以附加事件而不是硬编码它们。这样更容易维护，也更易于访问。 - Dan Blows
5个回答
4
事件处理程序需要返回false以防止正常链接操作，仅调用函数是不够的；如果希望抑制操作，则处理程序本身需要返回值false。因此，属性应该是：
onclick="return clickthis();"
谢谢，它正在工作。但是您能否告诉我该函数本身是否返回值（假设为false）？因此调用函数意味着它正在返回，为什么必须在onclick属性中放置“return clickthis()”（我也检查过没有放置'return'，它不会阻止）。好的，感谢这个精彩的答案。它让我了解了HTML处理的方式。 - Virendra
将 onclick="..." 属性的内容视为匿名函数的主体。如果只有调用 clickthis()，则函数返回的值将被忽略。调用者本身，即“匿名函数主体”，需要返回所需的值以影响浏览器处理链接的点击方式。 - Jukka K. Korpela
感谢您提供的深入知识。这个社区真的太棒了 :-) - Virendra
2
我有一个问题。为什么在标签的HREF中的Alert没有被调用？它也应该被调用。 - Virendra
因为在onclick处理程序中调用了preventDefault。 Onclick先于href执行，由于事件被preventDefault阻止，它不会冒泡到href。如果您注释掉e.preventHandler()调用，它将执行href中的警报。 - Krzysztof
1

[已在Firefox 35.0.1测试通过]

我为此提出了一些解决方案。 如果检测到锚点，并且定义了href，则点击接管并重定向页面。

代码：

<html><title></title><body>
<script type="text/javascript" src="https://ajax.googleapis.com/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.com">###3 google 3###</a>
</body></html>

注意： 在所有异步逻辑完成后，甚至可以进行重定向...
0

你需要使用 onclick="return clickthis();"，并且 clickthis() 必须返回 false。

0
如果您正在进行渐进增强（即如果用户未启用JavaScript，则转到google.com，如果启用则显示警报），那么您希望您的标记看起来像这样：
<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.com">google</a>
 </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接