原始方式:
<form action="http://www.cnblogs.com/zixueit/" onsubmit="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.onsubmit= 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; } } }