jQuery之防止冒泡事件
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
下面是html代码部分:
<body> <div id="content">外层div元素<span>内层span元素</span>外层div元素 </div><div id="msg"></div> </body>
对应的jQuery代码如下:
<script type="text/javascript"> $(function(){// 为span元素绑定click事件$('span').bind("click",function(){var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息$('#msg').html(txt);// 设置html信息 });// 为div元素绑定click事件$('#content').bind("click",function(){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>
当点击span时,会触发div与body 的点击事件。点击div时会触发body的点击事件。
如何防止这种冒泡事件发生呢?
修改如下:
<script type="text/javascript"> $(function(){// 为span元素绑定click事件$('span').bind("click",function(event){var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";$('#msg').html(txt);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>
event.stopPropagation(); // 阻止事件冒泡
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
下面是案例:
<script type="text/javascript"> $(function(){$("#sub").bind("click",function(event){var username = $("#username").val(); //获取元素的值,val() 方法返回或设置被选元素的值。if(username==""){ //判断值是否为空$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息event.preventDefault(); //阻止默认行为 ( 表单提交 ) }}) }) </script>
html部分:
<body> <form action="test.html"> 用户名:<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form><div id="msg"></div> </body>
还有一种防止默认行为的方法就是return false。效果一样。
代码如下:
<script type="text/javascript"> $(function(){$("#sub").bind("click",function(event){var username = $("#username").val(); //获取元素的值if(username==""){ //判断值是否为空$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息return false;}}) }) </script>
同理,上面的冒泡事件也可以通过return false来处理。
<script type="text/javascript"> $(function(){// 为span元素绑定click事件$('span').bind("click",function(event){var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";$('#msg').html(txt);return false;});// 为div元素绑定click事件$('#content').bind("click",function(event){var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";$('#msg').html(txt);return false;});// 为body元素绑定click事件$("body").bind("click",function(){var txt = $('#msg').html() + "<p>body元素被点击.<p/>";$('#msg').html(txt);}); }) </script>
jQuery之防止冒泡事件相关推荐
- iOS上的jQuery.on()冒泡事件绑定 以及 iOS绝对定位元素中的输入框
来:http://www.bubuko.com/infodetail-1029287.html 上周遇到两个坑. 一是jQuery的on方法 事件冒泡,在iOS中有问题. $("body&q ...
- jQuery之防止【冒泡事件】,阻止默认行为 【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面 两者都可以用 return ...
- 分享一个旋钮插件 jquery.knob.js 新增change事件中回调返回值功能以及阻止冒泡事件
本来都要休息了还是打开github,解决了线上一个插件的兼容性. 看来今晚能睡的比较踏实了! 插件介绍 jquery-knob是我用到的UI设计比较清新的旋钮插件之一,应用灵活,体积小,功能强大. 图 ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- js jquery阻止冒泡事件
event.stopPropagation(); -- 阻止元素冒泡事件 注:嵌套元素一般都存在冒泡事件,会带来某些影响 例:<div id="c1" οnclick=& ...
- JQuery阻止冒泡事件on绑定中异常情况分析
本文转载自https://www.cnblogs.com/tengj/p/4794947.html,纯粹作为日常笔记使用 科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部butto ...
- jQuery阻止冒泡事件的方法
jQuery提供了两种阻止冒泡事件的方法 方式一.event.stopPropagation() $('#div1').mousedown(function(event){ event.stopPro ...
- jQuery中阻止hover事件冒泡
这里写自定义目录标题 jQuery中阻止hover事件冒泡 前言 冒泡示例 冒泡效果 阻止冒泡 阻止冒泡效果 总结 jQuery中阻止hover事件冒泡 文章目录 jQuery中阻止hover事件冒泡 ...
- jQuery阻止冒泡事件的几种方法
一.何为冒泡事件 冒泡事件简单来说就是点击子节点,会向上触发父节点.祖先节点的点击事件. 二.阻止事件冒泡 可以通过以下三种方法做到不同程度的阻止. 1.return false (In event ...
最新文章
- MySQL 学习笔记(18)— 索引的分类、创建、查看、删除等
- 为什么LED内部不集成限流电阻呢?
- 关于Web服务器的认识
- ExtJS 等待两个/多个store加载完再执行操作
- make things simple
- boost shared_ptr线程安全性
- 怎么找出消耗 CPU 的罪魁祸首?!
- Tensorflow详解保存模型(基础版)
- java不使用除号实现除法运算_LeetCode29 Medium 不用除号实现快速除法
- BigDecimal丢失精度的坑
- MVC中不能使用原生态的#include ,可替代的解决方案
- 软件工程综合实践专题——个人博客作业1
- Redis是单线程为什么还那么快?
- 016.OpenStack及云计算(面试)常见问题
- elasticdump 数据导入导出
- 生成树模型 matlab,最小生成树matlab
- Oracle 根据身份证计算年龄 性别 生日
- c 语言温度换算的程序,华氏温度换算公式及C语言转换程序代码
- IDEA SVN拉下来的项目import project 没反应 解决方案
- python读取.ttf字体文件
热门文章
- C++输入输出进制、数据宽度与对齐、精度、取整
- 总结开发Silverlight项目准则(转)
- Ubuntu怎么用c/c++编程
- Json反序列化与Java泛型
- 你不知道的JavaScript运算符
- HTML中nbsp; ensp; emsp; thinsp;等6种空白空格的区别
- 「LibreOJ β Round #4」子集
- 杀毒软件已经 OUT 了!未来 CPU 也可以检测病毒
- MySQL索引原理及慢查询优化 美团
- c语言中removeDir的相反函数,C语言编程常见问题解答之常用函数的包括文件.doc