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

最新推荐文章于 2022-10-07 21:22:40 发布

u013464954

最新推荐文章于 2022-10-07 21:22:40 发布

阅读量4.6k

点赞数 1

文章标签： javascript 事件绑定阻止默认事件

本文链接：https://blog.csdn.net/u013464954/article/details/52799477

版权

1.默认事件：

浏览器本事具备的一些功能，如鼠标右键菜单，a标签跳转页面。

如果要阻止这些默认行为，可以用return false;

w3c中定义了ev.preventDefault()；这个不兼容IE11以下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			document.οncοntextmenu=function (ev){
				return false;//阻止右键菜单的动作
				//ev.preventDefault()
			};
		</script>
	</head>
	<body>
		<!--return false;阻止了a标签的href跳转动作-->
		<a href="https://www.baidu.com" οnclick="return false;">百度一下</a>
	</body>
</html>

举个栗子，文本框中只能键盘输入数字和删除键：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.οnlοad=function (){
				var oTxt=document.getElementById('txt');
				oTxt.οnkeydοwn=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.οnlοad=function (){
				var oBtn1=document.getElementById('btn1');
				var oBtn2=document.getElementById('btn2');
				oBtn1.οnclick=function (){
					alert('普通事件1');
				};
				oBtn1.οnclick=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的第三个参数之前的博客有提到，点击打开链接

u013464954

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js取消默认事件和事件绑定

1.默认事件：浏览器本事具备的一些功能，如鼠标右键菜单，a标签跳转页面。如果要阻止这些默认行为，可以用return false;w3c中定义了ev.preventDefault()；这个不兼容IE11以下。 document.oncontextmenu=function (ev){ return false;//阻止右键菜单的动作 //
复制链接

扫一扫