event.returnValue跟return false的区别 _Web前端

event.returnValue和return false的区别

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ??
<html?xmlns="http://www.w3.org/1999/xhtml"> ??
<title>runcode</title> ??
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ??
<meta?name="Author"?content="Sheneyan"?/> ??
<head> ??
<script?type="text/javascript"> ??
function?form1(){ ??
event.returnValue?=?false; ??
} ??
function?form2(){ ??
return?false; ??
} ??
</script> ??
</head> ??
<body> ??
<form?onsubmit="form1()">?? ??
<fieldset><legend>event.returnValue?=?false</legend>?<input ??
????type="submit"?/></fieldset> ??
</form> ??
<form?onsubmit="return?form2()">? ??
<fieldset><legend>return?false的正确用法</legend>?<input ??
????type="submit"?/></fieldset> ??
</form> ??
<form?onsubmit="form2()">? ??
<fieldset><legend>return?false的错误用法</legend>?<input ??
????type="submit"?/></fieldset> ??
</form> ??
</body> ??
</html>??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<head>
<script type="text/javascript">
function form1(){
event.returnValue = false;
}
function form2(){
return false;
}
</script>
</head>
<body>
<form onsubmit="form1()">  <!-- 1 -->
<fieldset><legend>event.returnValue = false</legend> <input
	type="submit" /></fieldset>
</form>
<form onsubmit="return form2()"> <!-- 2 -->
<fieldset><legend>return false的正确用法</legend> <input
	type="submit" /></fieldset>
</form>
<form onsubmit="form2()"> <!-- 3 -->
<fieldset><legend>return false的错误用法</legend> <input
	type="submit" /></fieldset>
</form>
</body>
</html>

?? 三个提交的onsubmit属性都是想让表单提交之前验证，验证失败则不提交表单。第一、二两处做到了，第三出没做到。

?? 这个只有运行起来才能看到结果

?? 1处，表单没有提交

?? 2处，表单没有提交

?? 3处，表单提交了。这不是希望的

event.returnValue的作用就是：当捕捉到事件(event)时，做某些判断，如果判断失败，则阻止当前事件继续运行，这样讲您也许还不是特别理解，我再举一个例子，该例子达到的效果是：不能在一个输入框中输入小数。

FireFox浏览器：

Js代码

<script?language="javascript"?type="text/javascript"> ??
????function?test(event) ??
????{ ??
????????if(event.charCode?==?46) ??
????????{ ??
????????????event.preventDefault(); ??
????????} ??
????} ??
</script> ??
??
<input?type="text"?onkeypress="test(event)"/>??

<script language="javascript" type="text/javascript">
	function test(event)
	{
		if(event.charCode == 46)
		{
			event.preventDefault();
		}
	}
</script>

<input type="text" onkeypress="test(event)"/>

?IE浏览器：

Js代码

<script?language="javascript"?type="text/javascript"> ??
????function?test() ??
????{ ??
????????if(event.keyCode?==?46) ??
????????{ ??
????????????event.returnValue?=?false;? ??
????????} ??
????} ??
??
<input?type="text"?onkeypress="test()"/>??

<script language="javascript" type="text/javascript">
	function test()
	{
		if(event.keyCode == 46)
		{
			event.returnValue = false; 
		}
	}

<input type="text" onkeypress="test()"/>

?请注意两种浏览器的不同之处，在FireFox中event必须作为test()函数的如参传入，而IE不用，这个我在《JavaScript高级程序设计》一书中P233页，9.4.1章节找到如下答案：

??? 9.4 事件对象

??? ...

??? 你也许已经猜到，IE和DOM是用两种不同的方法实现事件对象的。

??? 9.4.1

??? 在IE中，事件对象是window对象的一个属性event。也就是说，事件处理函数必须这样访问事件对象：

Js代码

oDiv.onclick?=?function() ??
{ ??
????var?oEvent?=?window.event; ??
}??

oDiv.onclick = function()
{
    var oEvent = window.event;
}

?? 尽管它是window对象的属性，event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后，事件对象就被销毁。

?? DOM 标准则说，event对象必须作为唯一的参数传给事件处理函数。所以，在DOM兼容的浏览器（如：Mozilla，Safari和Opera）中访问事件对象，要这么做：

Js代码

oDiv.onclick?=?function??
{ ??
????var?oEvent?=?arguments[0]; ??
????... ??
} ??
??
当然，可以直接命名参数，访问就更方便了： ??
oDiv.onclick?=?function(oEvent) ??
{ ??
????... ??
}??