您的位置：首页 > Web前端 > JavaScript

js取消默认事件和事件绑定

2016-10-12 18:55 369 查看

1.默认事件：

浏览器本事具备的一些功能，如鼠标右键菜单，a标签跳转页面。
如果要阻止这些默认行为，可以用return false;
w3c中定义了ev.preventDefault()；这个不兼容IE11以下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
document.oncontextmenu=function (ev){
return false;//阻止右键菜单的动作
//ev.preventDefault()
};
</script>
</head>
<body>
<!--return false;阻止了a标签的href跳转动作-->
<a href="https://www.baidu.com" onclick="return false;">百度一下</a>
</body>
</html>


举个栗子，文本框中只能键盘输入数字和删除键：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function (){
var oTxt=document.getElementById('txt');
oTxt.onkeydown=function (ev){
//					keyCode:8,48-57,96-105,
var iEvent=ev||event;
if(!(iEvent.keyCode==8||(iEvent.keyCode>=48&&iEvent.keyCode<=57)||
(iEvent.keyCode>=96&&iEvent.keyCode<=105))){
return false;//除去上面的按键码以外，取消其表单默认可以输入动作
}
};
};
</script>
</head>
<body>
<input type="text" id="txt"/>
</body>
</html>

2.事件绑定

在项目中，很多时候要用到两个onload、onscroll等事件，但浏览器只会执行最后一个，这时我们就要用到绑定事件。下面代码可以看到普通事件跟绑定事件的区别：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function (){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
oBtn1.onclick=function (){
alert('普通事件1');
};
oBtn1.onclick=function (){
alert('普通事件2');
};
//				可以看到普通事件只执行了第二个
oBtn2.addEventListener('click',function (){
alert('绑定事件1');
},false);
oBtn2.addEventListener('click',function (){
alert('绑定事件2');
},false);
//				绑定事件先执行第一个，接着执行第二个，IE中用oBtn2.attachEvent()添加绑定事件
};
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮1" />
<input type="button" id="btn2" value="按钮2" />
</body>
</html>


给绑定事件做了兼容性处理，代码如下：

function addEv(obj,type,fn){
if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}else{
obj.addEventListener(type,fn,false);
}
}


IE中会先执行绑定事件2，然后再执行绑定事件1

addEventListener的第三个参数之前的博客有提到，点击打开链接
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 事件绑定 阻止默认事件
相关文章推荐
新的分享
章节导航