javascript中的默认行为是指javascript中事件本身具有的属性,如<a>标签可以跳转,文本框可输入文字、字母等,右键浏览器会出现菜单等行为便被称为浏览器的默认行为。
那么为什么我们要消除浏览器的默认行为呢?因为有时在你给内容添加一个事件时,浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件。我们就需要消除浏览器的默认行为来使我们设置的事件能被正确触发。
那什么又是冒泡行为呢?
即在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。
如以下代码:
<!DOCTYPE HTML>
<html οnclick="alert('html');">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {
padding: 100px;
}
</style>
</head>
<body οnclick="alert('body');">
<div style="background:black;" οnclick="alert(this.style.background);">
<div style="background:green;" οnclick="alert(this.style.background);">
<div style="background:red;" οnclick="alert(this.style.background);"></div>
</div>
</div>
</body>
</html>
这里我们可以利用消除冒泡行为的代码来达到消除冒泡行为的目的:
oBtn.οnclick=function (ev){
var oEvent=ev || event;
oDiv.style.display='block';
oEvent.cancelBubble=true;
};
即对象名.cancelBubble=true;
这样单击oBtn就不会令其父级元素也触发onclick事件了
不过话说回来,我们应该怎样取消掉浏览器的默认行为呢?
举个例子,来消除浏览器右键出现菜单的事件:
<script type="text/javascript">
document.οncοntextmenu=function(){
return false;
}
</script>
其中oncontextmenu便是指在在元素中用户右击鼠标时触发并打开上下文菜单的事件。这里我们使用return,返回一个false给此函数,然后我们在浏览器中右键便无法出现菜单了。
实战:制作一个只能输出数字的文本框:
document.οnkeydοwn=function(ev){
var iEvent=ev||event;
alert(iEvent.keyCode)
}
</script>
<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){
var iEvent = ev || event;
if(iEvent.keyCode<96 || iEvent.keyCode>105){
return false;
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="txt" value="" />
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>只能输入数字的文本框</title>
<script type="text/javascript">
window.οnlοad=function(){
var oTxt=document.getElementById('txt');
oTxt.οnclick=function(){
oTxt.value='';
}
oTxt.οnkeydοwn=function(ev){
var iEvent = ev || event;
if(iEvent.keyCode!=8 && (iEvent.keyCode<96 || iEvent.keyCode>105)){
return false;
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="txt" value="请输入数字" />
</body>
</html>