return false、イベントのデフォルト動作をブロックするいくつかのテストコード

まずページに

次のイベントをバインド

 

test.onkeydown = function(){ 

return false; 

} 

 

test.onkeyup = function(){ 

return false; 

} 

 

test.onkeypress = function(){ 

return false; 

} 

 

2つのイベントを別々に注釈し、テストごとに1つのイベントのみをバインドします.

各関数はfalseを返します.戻り値がイベントのデフォルト動作をブロックできる場合、テキストボックスには何も入力できません.

私がテストした結果を見て、赤い部分に注意してください.

最後にイベントを2回バインドし、falseに戻るたびにデフォルトの動作を阻止できるかどうかを確認します.

やはりaタグでonclickがfalseにジャンプするかどうかをテストしました.

リスニングイベントはfalseがイベントのデフォルト動作をブロックするかどうかを返します
	chrome	IE-8	firfox	oper	Safari
onkeydown	yes	yes	yes	no	yes
onkeyup	no	no	no	no	no
onkeypress	yes	yes	yes	yes	yes
onclick	yes	yes	yes	yes	yes
keydown * 2	no	最後のFN結果を取る	no	no	no
keypress * 2	no	最後のFN結果を取る	no	no	no
click * 2	no	最後のFN結果を取る	no	no	no
e.preventDefault();	yes	no	yes	yes(keydown:no)	yes
e.returnValue = false	no	yes	no	no	no

ブラウザの表現は確かに違います.もちろんIEは一番面倒なものです.

最も意外なのはoperでdownをバインドしてfalseに戻ることで、意外にもデフォルトの動作を阻止することはできません.

これからはブラウザのデフォルト動作をブロックするように書くときは、標準的な方法を使ったほうがいいです.(後述)

そうでなければ、複数の人が協力する仕事では、かなり面倒になります.

プレゼンテーションのdeomに必要なメールがありました.私は貼りません.

 

/** のコードで は こらない

* 

* E(e).stop(); タイムバブルを する

* E(e).prevent(); のデフォルトの をブロック

*/

var E = function(e){ 

e = window.event || e; 

return { 

stop: function() { 

if (e && e.stopPropagation) e.stopPropagation(); 

else e.cancelBubble = true 

}, 

prevent: function() { 

if (e && e.preventDefault) e.preventDefault(); 

else e.returnValue = false 

} 

} 

}