2012-01-20 7 views
2

hcl値で処理するにはonclick関数はfalseを返し、ブロックするにはtrueを返す必要があります。私もここで同じものを使用しました。 falseを返すと、それは正しいですが、URLで処理しますが、trueを返すと、URLページも開きます。Onclick関数は、trueを返すときにアンカータグのHREF値をブロックしていません

したがって、onclick関数から真偽値を返すことの違いは何ですか?

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

私はこの動作と混同しました。

+0

'、 @Loloには正しい解決策があります。 – JamesHalsall

+0

jQueryのようなJavaScriptライブラリを見て、ハードコーディングする代わりにイベントをアタッチすることができます。メンテナンスが容易で、アクセスが容易です。 –

答えて

4

イベントハンドラは、通常のリンクアクションを防ぐためにfalseを返す必要があり、それだけで機能を呼び出すためにsuffientされていません。アクションを抑制したい場合は、ハンドラ自体が値falseを返す必要があります。だから、属性は、あなたがonclick="return clickthis();"とclickthis()がfalseを返すために持って使用する必要が

onclick="return clickthis();" 
+0

ありがとうそれは働いています。しかし、関数自体が値を返していることを教えてください(falseと言うことができます)。関数を呼び出すことは、なぜそれがonclick属性に "return clickthis()"を置く必要があるのか​​を意味します。 (私はそこに「戻る」を置かずにチェックしたが、それはブロックしていない)。この素晴らしい答えに感謝します。 htmlのproceesingがどのように行われているかを知ることができます。 – Virendra

+0

'onclick =" ... "'属性の内容を無名関数の本体と考えてください。 'clickthis()'だけを呼び出すと、関数が返す値は無視されます。ブラウザがリンクのクリックを処理する方法に影響を及ぼすために、呼び出し元自体、「匿名関数本体」は、必要な値を返す必要があります。 –

+0

このIndepthの知識をありがとう。このコミュニティは本当にロックしています:-) – Virendra

2

イベントオブジェクトに対してpreventDefaultメソッドを使用する必要があります。 例:http://jsfiddle.net/lolo/vD5hK/

+0

私には1つの質問があります。タグのHREFにあるアラートが呼び出されないのはなぜですか?それはまた呼ばれるべきです。 – Virendra

+0

'preventDefault'は' onclick'ハンドラで呼び出されるためです。 Onclickはhrefの前にあり、イベントは 'preventDefault'によってブロックされるので、hrefにバブルしません。 'e.preventHandler()'をコメントアウトすると、hrefからalertが実行されます。 – Krzysztof

0

でなければなりません。

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

注: uは一度もすべての非同期ロジックが終わっリダイレクトを行うことができます...あなたのonclickのは、 "()clickthisを返す;" `読みのonclick =なければならない

関連する問題