js:浏览器的默认行为怎么消除
来源:互联网 发布:paparecipe软件可靠吗 编辑:程序博客网 时间:2024/06/10 15:16
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事件了
不过话说回来,我们应该怎样取消掉浏览器的默认行为呢?
举个例子,来消除浏览器右键出现菜单的事件:
<script type="text/javascript">
document.oncontextmenu=function(){
return false;
}
</script>
其中oncontextmenu便是指在在元素中用户右击鼠标时触发并打开上下文菜单的事件。这里我们使用return,返回一个false给此函数,然后我们在浏览器中右键便无法出现菜单了。
实战:制作一个只能输出数字的文本框:
document.onkeydown=function(ev){
var iEvent=ev||event;
alert(iEvent.keyCode)
}
</script>
<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>
<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>
- js:浏览器的默认行为怎么消除
- js阻止浏览器默认行为
- js阻止浏览器默认行为触发的通用方法
- js阻止浏览器的默认行为以及停止事件冒泡
- js 停止事件冒泡 阻止浏览器的默认行为
- js的默认行为
- 阻止浏览器的默认行为
- 取消浏览器的默认行为
- 重载浏览器的默认行为
- js之阻止浏览器默认行为
- 【CSS】CSS消除浏览器的默认样式
- JS:停止事件冒泡和阻止浏览器的默认行为 js/jquery/prototype
- 如何禁止浏览器的默认提交行为?
- 如何禁止浏览器的默认行为
- 如何阻止浏览器的默认行为?
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- C语言实验——一元二次方程Ⅱ
- 与文件有关的函数和关键词
- React-Native之微信好友、朋友圈分享、支付
- [LeetCode] 384. Shuffle an Array
- 设计模式之Java中的单例模式
- js:浏览器的默认行为怎么消除
- Java实用类库
- Android加密和解密(DES,AES,MD5)
- 各个手机打开USB调试
- 打造急速开发框架FastApp
- c++中创建动态结构以及输入B输出C实现方法
- 字符串的包含
- Ubuntu下使用Eclipse和PyDev搭建完美Python开发环境 (eclipse中不显示pydev插件解决方法)
- 文章标题