在form表单上绑定onsubmit事件,并在对应的事件函数中return false; 以阻止表单的提交.
0级DOM绑定方式,可以阻止, 但2级DOM绑定方式不能阻止.
0级DOM代码如下, 可以阻止.
<form>
<p><input type="submit" value="提交"></p>
</form>
<script>
var fm=document.getElementsByTagName('form')[0];
fm.onsubmit=function(){
return false;
}
</script>
2级DOM代码如下, 不能阻止.
<form>
<p><input type="submit" value="提交"></p>
</form>
<script>
var fm=document.getElementsByTagName('form')[0];
fm.addEventListener('submit',test);
function test (){
return false;
}
</script>
疑问: 绑定的事件函数,同样是return false,为何后者不能阻止.
这是因为在2级绑定方式中,如果需要阻止事件的传播/冒泡,需要用到事件对象对象的stopPropagation()方法.
阻止事件的默认行为,要用事件对象的preventDefault()方法.
正确的写法如下:
<form>
<p><input type="submit" value="提交"></p>
</form>
<script>
var fm=document.getElementsByTagName('form')[0];
fm.addEventListener('submit',test);
function test (e){
e.preventDefault();
}
</script>
就如倚天屠龙记中的周芷若,内力不足,强练九阴真经,终致走火入魔.
如果认真学习过十八哥的”JS高级”中的事件停止传播与效果阻止
就不会有此疑问.
所以此处提醒同学们: 学习,要尽量系统性的学.争取学一门,得到一门.
而不要搜索几个新鲜知识点,试来试去,看似了解很多,实则一片茫然.
如果你仍要刨根问底,为什么2级标准中,绑定的事件,return false不能阻止事件发生呢?
答:w3c中规定,addEventListener()的第2个参数中绑定的事件对象”无返回值”,自然return false也不灵了.
官方说明: https://www.w3.org/TR/DOM-Level-2-Events/ecma-script-binding.html
细看这一句:
This is an ECMAScript function reference. This method has no return value. The param