Onclick函數在返回true時不會阻塞錨標記的HREF值

我發現onclick函數必須返回false才能繼續使用href值，如果使用true則阻止它。我也是這樣用的。在返回false時，它是正確的，處理URL但返回true時，它也打開URL頁面。Onclick函數在返回true時不會阻塞錨標記的HREF值

那麼返回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>

我對這種行爲感到困惑。

來源

2012-01-20 Virendra

您的onclick應該讀'的onclick = 「返回clickthis（）;」'但@Lolo擁有正確的解決方案 – JamesHalsall

查看像jQuery這樣的JavaScript庫，因此您可以附加事件而不是對它們進行硬編碼。維護起來更容易，而且更易於訪問。 –

事件處理程序需要返回false以防止在正常鏈接操作，並且不suffient只是調用函數;如果您希望抑制該操作，處理程序本身需要返回值false。因此，屬性應該是

onclick="return clickthis();"

來源

2012-01-20 12:48:07

謝謝它的工作。但請你告訴函數本身返回值（讓我們說假）。所以調用函數意味着它正在返回，所以它必須在onclick屬性中放置「返回clickthis（）」。（我也檢查了沒有放置'返回'那裏沒有阻止）。非常感謝這個美好的回答。它讓我知道如何完成html的過程。 – Virendra

將'onclick =「...」'屬性的內容看作匿名函數的主體。如果你只是調用'clickthis（）'，那麼函數返回的值將被忽略。調用者本身即「匿名函數體」需要返回所需的值以影響瀏覽器處理鏈接點擊的方式。 –

感謝您的Indepth知識。這個社區真的是ROCKS :-) – Virendra

您應該在事件對象上使用preventDefault方法。例子：http://jsfiddle.net/lolo/vD5hK/

來源

2012-01-20 12:46:05 Krzysztof

我有一個問題。爲什麼Alert沒有被標記爲HREF？它也應該被調用。 – Virendra

因爲在'onclick'處理程序中調用了preventDefault。 Onclick在href之前進行，並且由於事件被'preventDefault'阻止，所以它不會冒泡到href。如果你註釋掉'e.preventHandler（）'，它會執行href的alert。 – Krzysztof

您需要使用onclick="return clickthis();"和clickthis（）必須返回false。

來源

2012-01-20 12:48:20 xpapad

如果你打算爲漸進增強（即去到google.com，如果用戶不啓用JavaScript，顯示出如果他們這樣做的警報），那麼你希望你的標記看起來像這樣：

<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>

來源

2012-01-20 12:51:48

[與Firefox 35.0.1 TESTED]

我提出了一些解決方案，這。如果檢測到錨點，並且定義了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>

注： ü甚至可以重定向，一旦所有的異步邏輯結束後...

來源

2015-02-04 17:33:01

Onclick函數在返回true時不會阻塞錨標記的HREF值

回答

相關問題