使用事件的preventDefault()方法改变默认行为
事件有属性,还有方法,还有事件。事件本身是个对象^_^
事件的preventDefault()方法改变默认行为,在事件发生前阻止,不让其发生。这样的应用场景有很多,常见表单验证,如必填字段不能为空。
示例1,阻止链接
<body> <p>DOM使用preventDefault()方法,IE5~IE8使用returnValue</p> <p><a href="http://www.baidu.com/">去百度</a></p> <p><a href="http://www.baidu.com" id="gotobaidu">去百度,将被阻止</a></p> <script> var gotobaidu=document.getElementById("gotobaidu"); gotobaidu.addEventListener('click',stop,false); function stop(e) { if(e.preventDefault){ e.preventDefault(); }else{ window.event.returnValue=false; } } </script> </body>
示例2,阻止表单提交
<body> <p>DOM使用preventDefault()方法,IE5~IE8使用returnValue</p> <form id="myform" action="http://www.baidu.com/" method="get"> 用户名:<input type="text" id="username" name="username"> <button type="submit">提交</button> </form> <script> var myform = document.getElementById('myform'); myform.addEventListener('submit', stop, false); function stop(e) { var username = document.getElementById('username'); // alert(username.value); if (username.value === '') { //要求输入内容 alert("请输入用户名"); // 阻止 if (e.preventDefault) { e.preventDefault(); } else { window.event.returnValue = false; } } } </script> </body>