jQuery阻止默认行为和阻止冒泡
1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等。
那如何阻止标签的默认行为?
1)return false
2) e.preventDefault();
<!DOCTYPE html>
<html>
<head>
<title>queue</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<!-- 设置五幅图片 -->
<div> <a class="a1" href="http://www.baidu.com">百度入口一(被阻止)</a>
<a class="a2" href="http://www.baidu.com">百度入口二(可使用)</a> </div>
<script type="text/javascript">
$(function(){
$('.a1').click(function(e){
//return false;
e.preventDefault();
});
})
</script>
</body>
</html>
其中return false不仅阻止默认行为还会阻止冒泡。
2.阻止事件冒泡
事件冒泡是指如果子元素与父元素或者祖先元素包含同样的事件,如click等,当点击子元素时,父元素上的点击事件也会触发。
阻止时间冒泡的方法:
1)return false
2)e.stoppropagation();
<!DOCTYPE html>
<html>
<head>
<title>queue</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body> <div class="div3">
div3
<div class="div2">
div2
<div class="div1">div1</div>
</div>
</div> <script type="text/javascript">
$(function(){
$('div').click(function(e){
alert(e.target.className);
e.stopPropagation();
//return false; });
})
</script>
</body>
</html>
总结:return false会阻止事件冒泡和默认行为
e.stopPropagation()只阻止事件冒泡;
e.preventDefault()只阻止默认行为;
jQuery阻止默认行为和阻止冒泡的更多相关文章
- javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为 在说事件冒泡之前 ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
- (O)阻止默认事件和阻止冒泡的应用场景
场景1:阻止默认事件 比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候 阻止冒泡,防止其跳转. <a id='ca ...
- vue 事件修饰符(阻止默认行为和事件冒泡)
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
- JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题
return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...
- JS中阻止默认事件与事件冒泡
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
随机推荐
- WTL编程小技巧汇编
1.设置窗体生成大小并中央显示窗口 2.设置窗体最大/小尺寸 3.动态设置窗体标题 4.设置对话框的字体和背景颜色 5.设置窗体控件默认字体 以下技巧可应用于SDI和MDI程序: 1.设置窗体生成大小 ...
- 只适用于HTML的DOM对象
前面,已经学习了如何对树结构进行遍历,并添加.删除.修改任何XML文档中的节点.但是,还有一些对象和属性石只适用于HTML的.列如,document.body就是一个纯HTML对象.只要HTML文档中 ...
- CPS冥想 - 2 手撸控制流
原博客链接:http://blogs.msdn.com/b/ericlippert/archive/2010/10/22/continuation-passing-style-revisited-pa ...
- sql创建表格 转载
http://blog.csdn.net/wuxiaokaixinguo/article/details/8293048 检查数据库中是否存在某个表,不存在则生成该表方法一:IF NOT EXISTS ...
- 数据库 MySql
MySql 一,概述 1,什么是数据库? 数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其为数据库 二,下载安装 想要使用MySQL来存储并操作数据,则需要做几件事情: a. 安装My ...
- cocos2dx loading界面 预加载资源 与 资源释放
预加载图片: 1.CCTextureCache::sharedTextureCache()->addImage("icon.png"); 2.CCTextureCache:: ...
- 在后台 .cs 中执行前台的js 函数
<script type="text/javascript" language="javascript"> <!-- function ope ...
- Python学习——基础篇
1.python的安装 python下载地址:https://www.python.org/downloads/ 安装完成后,运行cmd.exe,输入python 如果出现“p ...
- (Hibernate进阶)Hibernate基本原理(一)
在开始学hibernate之前,一直就有人说:Hibernate并不难,无非是对JDBC进一步封装.一句不难,难道是真的不难还是眼高手低? 如果只是停留在使用的层面上,我相信什么技术都不难,看看别人怎 ...
- Qlik 函数说明
集合表达式 包括 标识符 标识符 说明 1 表示应用程序中所有记录的完整集合,而不考虑选择的任何选择项.考虑维度 $ 表示当前选择项的记录.因此,集合表达式 {$} 与不陈述集合表达式的意义等同. $ ...