jquery取消事件冒泡的三种方法展示
2024-10-16 13:16:11
jquery取消事件冒泡的三种方法展示
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻止冒泡</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
问题一:当我们点击“span”时会触发“div”和“body”的事件,如何只触发单一点击事件不触发到父节点点击事件呢?修改:在各点击事件结尾加上stopPropagation()会阻止触发上一节点事件;
修改如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
event.stopPropagation()
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation()
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head> <body>
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div>
</body>
</html>
问题二:表单没有通过验证阻止表单提交,这时候可以通过设置event.preventDefault(); 阻止默认行为 ( 表单提交 )。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script> <script>
$(function(event){
$("form").submit(function(){
if($("input[name='username']").val()==''){
event.preventDefault();
$("#msg").html("<p>文本框的值不能为空.</p>");
alert("123")
}
})
}) </script>
</head> <body> <form action="www.baidu.com">
<input name="username">
<input type="submit" value="提交">
</form>
<div id="msg"></div>
</body>
</html>
第三种阻止冒泡方式 return false:实际上这个很通用但是内部是执行了 (1)event.preventDefault();
(2)event.stopPropagation();
(3)停止回调函数执行并立即返回;这三个动作我们需要根据实际情况选择阻止冒泡的方式
最新文章
- EC笔记,第二部分:9.不在构造、析构函数中调用虚函数
- python 过滤出某后缀名文件
- UNIX环境高级编程笔记之进程控制
- Python核心编程--学习笔记--5--数字
- Java学习笔记之:java运算符
- cursor:hand与cursor:pointer的区别介绍
- CentOS+Nginx一步一步开始配置负载均衡
- Laravel Repository 模式
- iOS 获取系统目录
- Oracle EBS-SQL (PO-5):采购订单控制信息查询.sql
- jQuery EasyUI的使用入门
- LogFactory缺包异常
- 指定路径下建立Access数据库并插入数据
- 【编程笔记】Unity3D语言的类型系统--C#的类型系统
- Docker学习——pinpoint部署
- 通过apt-get安装JDK8
- 【Diary】
- 编译:ffmpeg,精简ffmpeg.exe
- Apache ab并发负载压力测试(python+django+mysql+apache)
- linux 3.10的list_del
热门文章
- log4j日志配置(按天/按日)
- SCP对拷如何连接指定端口远程主机
- 如何调用别人提供的API?
- c# mac地址 和http://xx.xx.xx/ 正则表达式匹配
- Git二进制文件冲突解决
- How to use GM MDI interface for programming
- linux日志查找技巧
- pytho常用模块2——random
- list,set等集合遍历时,不能remove集合中的元素。需要new一个Object或者list,set,里面add需要删除的元素,等集合遍历完了进行remove(Object)或者removeAll(list/set)操作
- XSS绕过速查表