js：浏览器的默认行为怎么消除

最新推荐文章于 2023-02-20 16:44:35 发布

dzahao

最新推荐文章于 2023-02-20 16:44:35 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：默认行为冒泡事件文章标签： javascript 默认行为冒泡事件

本文链接：https://blog.youkuaiyun.com/dzahao/article/details/52809818

默认行为同时被 2 个专栏收录

1 篇文章

订阅专栏

冒泡事件

1 篇文章

订阅专栏

本文介绍如何取消浏览器默认行为，例如消除右键菜单和限制文本框输入。通过 JavaScript 的 event.preventDefault() 和 return false 实现，避免不需要的事件触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript中的默认行为是指javascript中事件本身具有的属性，如<a>标签可以跳转，文本框可输入文字、字母等，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。

那么为什么我们要消除浏览器的默认行为呢？因为有时在你给内容添加一个事件时，浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件。我们就需要消除浏览器的默认行为来使我们设置的事件能被正确触发。

那什么又是冒泡行为呢？

即在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

如以下代码：

<!DOCTYPE HTML>
<html onclick="alert('html');">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {
padding: 100px;
}
</style>
</head>
<body onclick="alert('body');">
<div style="background:black;" onclick="alert(this.style.background);">
<div style="background:green;" onclick="alert(this.style.background);">
<div style="background:red;" onclick="alert(this.style.background);"></div>
</div>
</div>
</body>
</html>

这里我们可以利用消除冒泡行为的代码来达到消除冒泡行为的目的：

oBtn.onclick=function (ev){
var oEvent=ev || event;

oDiv.style.display='block';

oEvent.cancelBubble=true;
};

即对象名.cancelBubble=true；

这样单击oBtn就不会令其父级元素也触发onclick事件了

不过话说回来，我们应该怎样取消掉浏览器的默认行为呢？

举个例子，来消除浏览器右键出现菜单的事件：

其中oncontextmenu便是指在在元素中用户右击鼠标时触发并打开上下文菜单的事件。这里我们使用return，返回一个false给此函数，然后我们在浏览器中右键便无法出现菜单了。

实战：制作一个只能输出数字的文本框：

这里我们先用onkeydown事件来看键盘上数字对应的数字范围是多少

运行代码发现，小键盘上的0~9对应的范围为96~105，我们知道了范围便可来编写代码了

<!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){
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>

以上代码意为当在文本框输入内容时，将判断键盘上按下的键数字为多少，若不在96~105的范围内时，便返还一个false值，使其不生效，这样便可达到只能输入数字的目的。但会发现我们输入数字时，若输错了会发现连退格键都按不了，这样我们改进一下，用以上方法再去测试一下退格键为多少。

测试后发现退格键为8，我们再将这个条件加进代码，使退格键和数字都能生效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>只能输入数字的文本框</title>
<script type="text/javascript">
window.onload=function(){
var oTxt=document.getElementById('txt');
oTxt.onclick=function(){
oTxt.value='';
}
oTxt.onkeydown=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>

消除浏览器的默认行为还有很多种，欢迎在评论下面添加

谢谢观看