js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 300px;
height: 300px;
background: red;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
var box = document.getElementById('box');
btn.onclick = function(ev) {
var oEvent = ev || event;
box.style.display = 'block';
//oEvent.cancelBubble = true;//高版本浏览器
stopBubble(oEvent);
//在低版本的chrome和firefox浏览器中需要兼容性处理
//高版本chrome和firefox浏览器直接使用上面这行代码即可
}
document.onclick = function() {
box.style.display = 'none';
}
}
//阻止冒泡事件的兼容性处理
function stopBubble(e) {
if(e && e.stopPropagation) { //非IE
e.stopPropagation();
} else { //IE
window.event.cancelBubble = true;
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="语言" />
<div id="box"></div>
</body>
</html>
jquery DefaultPrevented
转载▼
阻止默认事件行为的触发。
例如，在执行这个方法后，如果点击一个锚点，就不会让浏览器跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)调用过了。
<!DOCTYPE html>
<head>
<script
src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a
href="http://www.3qhouse.com">default click action
is prevented</a>
<div
id="log"></div>
<script>
$("a").click(function(event) {
event.preventDefault();
$('<div/>').append('default ' +
event.type + ' prevented').appendTo('#log');
});
</script>
</body>
</html>
说明：对超级链接“<a>”,就有自身默认的跳转到新的URL行为，一旦给添加了js的点击事件，那么执行顺序是，首先执行click这个点击事件，然后才执行“<a>”的默认行为。
所以上面的示例中点击之后，首先执行了jquery的click事件，而在click事件处理方法中通过event.preventDefaule()阻止了默认的行为。
js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数的更多相关文章
- JavaScript阻止冒泡和取消事件默认行为
//功能:停止事件冒泡 function stopBubble(e) { if ( e && e.stopPropagation ) { e.stopPropagation(); } ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- js阻止冒泡
js阻止冒泡 (ev || event).cancelBubble = true; 标签切换 <script type="text/javascript"> windo ...
- 在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
- Redis：默认配置文件redis.conf详解
转: Redis:默认配置文件redis.conf详解 # Redis配置文件样例 # Note on units: when memory size is needed, it is possibl ...
- jQuery：详解jQuery中的事件（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- javascript event（事件对象）详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- js中event.preventDefault()和 event.stopPropagation( ) 方法详解
event.preventDefault() 1.首先event.preventDefault()是通知浏览器不要执行与事件关联的默认动作,例如: 这里a标签的默认事件是跳转,这里我们告诉浏览器取消 ...
随机推荐
- 校验基于EO的VO中的字段是否发生变化
I have a table region and there are multiple records fetching from a Entity based VO. Now I have upd ...
- secureCRT不能输入
用secureCRT建了一个串口COM1后,连接上开发板后,可以正确接受和显示串口的输出,但是按键输入无效. 解决: Session Options -> Connection -> Se ...
- 64位的ubuntu14.04 LTS安装 Linux交叉编译工具链及32位“ia32-libs”依赖库
ubuntu又迎来了其新一代的长期支持版本 14.04 LTS,其带来了许多令人期待的新特新,遂决定进行升级. 装好了64位版本及安装 Linux交叉编译工具链 运行GCC,${CROSS_COMPI ...
- Winform开发之DataGridView的增删改
DataGridView是一个非常强大的控件,用法很多.这里介绍一个简单的增删改例子. 贴效果图 右侧输入学生信息点击新增,将数据增加到数据库,并且加载到datagridview中,点击选择某条数据修 ...
- ubuntu 11.04 Gnome 恢复默认的任务栏面板
在Ubuntu(实际是GNOME) 中,桌面上默认的任务栏菜单面板是上下两栏,上面(Panel) 是系统菜单和通知区域下面是窗口存放切换区域,那么作为ubuntu用户来说,你总会使系统用起来更顺手更美 ...
- hdu 3613 Best Reward
After an uphill battle, General Li won a great victory. Now the head of state decide to reward him w ...
- 【maven】Maven打包后为何文件大小改变了
项目中使用了X.509证书,用Maven打包后,测试时报错: java.security.cert.CertificateException: Could not parse certificate: ...
- test20181020 B君的第二题
题意 分析 考场70分 一看就是裸的kmp,直接打上去. #include<cstdlib> #include<cstdio> #include<cmath> #i ...
- 文档内容类似项处理-Shingling
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jituotianxia2009/article/details/25339807 集合的Jaccar ...
- 世界级的开源项目：TiDB 如何重新定义下一代关系型数据库
著名的开源分布式缓存服务 Codis 的作者,PingCAP 联合创始人& CTO ,资深 infrastructure 工程师的黄东旭,擅长分布式存储系统的设计与实现,开源狂热分子的技术大神 ...