js中有许多默认事件方法,当我们触发时就会自动执行,比如点击链接跳转,右键弹出属性菜单等等。于是为了满足我们自定义的行为,需要阻止事件默认行为,即preventDefault()方法。
preventDefault()
preventDefault()是我们最常用的方法,但今天用的时候发现并没有效果,一直找原因啊,终于有所发现了!
以阻止链接跳转和右键弹出菜单等事件为例:
<body>
<a href="https://www.baidu.com">跳转</a>
<form id="fm" name="mm" action="#fm">
<input type="text" name="aa" value="hello" />
<input type="submit" value="提交" />
<textarea name="tct" rows="4" cols="5"></textarea>
</form>
</body>
这里主要使用chrome、firefox和IE三种浏览器引擎进行兼容测试,在lunascape6中测试(方便引擎切换);
在js段中写脚本执行程序:
<script type="text/javascript">
window.onload=function(evt){
var link = document.getElementsByTagName('a')[0];
//第一种方法:不直接使用addEventListener来使用阻止事件默认行为,采用显示直接事件形式
// link.onclick=function(evt){
// evt.preventDefault();//成功,兼容
// alert(evt.target);//http://www.baidu.com
// alert(evt.preventDefault());//undefined
// alert(typeof evt.preventDefault);//function
// evt.returnValue=false; //只有webkit引擎支持
//}
//第二种方法:上述函数中使用evt.returnValue属性设置为false即可阻止,但目前测试只在webkit引擎下有效
// link.onclick=function(evt){
// evt.returnValue=false; //只有webkit引擎支持
//}
//第三种方法:如果要实现的自定义功能较少,可以考虑这种简单暴力的方法但多数情况下不建议使用,因为具有必须放在最后执行且在其后的代码无法执行的缺陷
// link.onclick=function(){
// return false;
// }
//第四种方法:在第一点就提到使用增加事件监听器无效的原因是什么呢?因为通常情况下我们使用该方法会直接调用,因此相当于是window这个大范围的对象在监听,传给其中function的event是什么就难以明白就无法达到效果,但实际我们要监听的只有目标对象,因此指定目标去监听时就可以明确function肯定是由目标对象发出的,而我们又只进行了点击操作,所以event就很明显了!
//测试了三种引擎浏览器,成功
var txt = document.getElementsByTagName('textarea')[0];
// txt.addEventListener('contextmenu',function(evt){
// evt.preventDefault();
// alert('Hello');
// },false);
}
</script>
以上测试在浏览器新版本中可行,低版本未测试过
addEventListener()
addEventListener()解决了我们在事件中传递this、多重递归导致浏览器崩溃和函数覆盖等很多问题,为解决事件提供了很好的支持。
但一般使用该方法时,习惯直接使用不指定对象,这可能会产生意外效果需要注意。另外使用对象显示调用addEventListener时要注意参数有所不同,(type,listener,scope)分别是:事件类型,监听到事件执行的function,以及捕捉(true)或冒泡(false)的boolean值设置。
因此,总结下用到addEventListener()时需要谨慎一些,最好采用指定对象监听方式,因为默认情况下直接使用是window在操作而我们并不知道监听到的事件到底是什么!