原始方式:
<form action="http://www.cnblogs.com/zixueit/" οnsubmit="return check()">
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
function check(){
if(!confirm('确定?')){
return false;
}
}
</script>
大多数情况我们需要行为和结构分离,所以我们在html代码中加onclick代码是不合适的,解决方案:
//dom0级事件绑定
<form action="http://www.cnblogs.com/zixueit/">
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
onload = function(){
myform = document.getElementsByTagName('form')[0];
myform.οnsubmit= function(){
if(!confirm('你确定?')){
return false;
}
}
}
</script>
再看看dom2级事件绑定:
myform = document.getElementsByTagName('form')[0];
if (myform.addEventListener) {
myform.addEventListener('submit', check, false);
}
else {//for ie
myform.attachEvent("onsubmit", check);
}
function check(){
if(!confirm('确定?')){
return false;
}
}
但是我们测试的时候我们会发现IE下能够阻止表单提交,但是FF、chrome等浏览器并不能阻止表单提交
原因是:Object EventListener:This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.
可见,listener是没有返回值的(写了也不会认),因此我们的check函数的返回值是不起作用的。
function check(ev) {
if (!confirm('确定?')) {//验证出错的情况just a demo
ev = ev || window.event; // Event对象
if (ev.preventDefault) { // 标准浏览器
ev.preventDefault();
} else { // IE浏览器
window.event.returnValue = false;
}
}
}