超简单讲解JQ冒泡问题
当JQ代码越写越长的时候,冒泡的问题就会显得突出.所以对JQ冒泡问题的了解是十分必要的.
那么什么是冒泡了,个人简单的理解就是在触发子元素事件的时候父元素的事件也被动触发.
举个简单例子:
例如有一个十分必要的全局mousedown和一个button的click(mousedown先于click触发)
document.onmouseup = function (e) {
alert("document")
} $("#click").on('click', function (event) {
alert("button")
})
我们只想要触发按钮的点击事件
然而先执行了父元素的mousedown.,就是所谓的冒泡(父元素的事件冒到了上面,)
所以我们就需要 阻止冒泡
document.onmouseup = function (e) {
alert("document")
} $("#click").on('click', function (event) {
alert("button")
})
$("#click").on('mouseup', function (event) {
event.stopPropagation();//阻止父元素的冒泡,特别注意,事件必须一致
})
只触发了按钮的点击事件
特别注意,阻止冒泡,必须事件一致
另外浏览器的默认行为有时候也会冒上来干扰,阻止浏览器的默认行为event.preventDefault();
使用return false会同时具上述两个的阻止功能.
超简单讲解JQ冒泡问题的更多相关文章
- win8.1上wamp环境中利用apache自带ab压力测试工具使用超简单讲解
2015.10.4apache自带ab压力测试工具使用:本地环境:win8.1 wampserver2.5 -Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b 可以参考一 ...
- 超简单的jq图片上传
<label class="file_img" for="file_imgs"> <input class="file_imgs&q ...
- 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...
- vuex其实超简单,只需3步
前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 vuex, 但是不知道为什么,团队里的一些新人一听 ...
- mysql安装到最后一步无响应的问题超简单最有效解决
mysql安装到最后一步无响应的问题超简单最有效解决 无论你是安装过还是没安装过,通过此方法都可以解决.之前我的机器和服务器就是都到最后一步卡住,上网搜索方法都无果.后自己尝试了很多次,亲测64位机和 ...
- 关于SI4432的问题简单讲解
对于SX1278 和SI4432的对比性,下面为大家展示对比参数: 由此可以看出的SI4432虽然跟SX1278有部分地方不同,但是整体来说还是差别不大,各有各的长处和短处,性价比上个人还是觉得SI4 ...
- FTP的搭建与虚拟目录作用<之简单讲解>
操作系统:win7 VS2010编写WebService与在IIS的发布<之简单讲解>中我已经说了IIS安装与使用,不明白的可以跳过去看. 1.添加FTP站点 2. 3. 4. 5. zq ...
- 把C#程序(含多个Dll)合并成一个Exe的超简单方法
开发程序的时候经常会引用一些第三方的DLL,然后编译生成的exe文件就不能脱离这些DLL独立运行了. 但是,很多时候我们本想开发一款只需要一个exe就能完美运行的小工具.那该怎么办呢? 下文介绍一种超 ...
- 记住密码超简单实现(C#)
实现效果如下 实现过程 [Serializable] class User { //记住密码 private string loginID; public string LoginID { get { ...
随机推荐
- ubuntu如何实现访问实际网络中windows共享文件夹
方法一: 首先在建立一个挂载目录. sudo mkdir /mnt/share 然后就把共享目录持载进去. 服务器:192.168.6.84 共享名:gg 用户名:administrator 密 码: ...
- listview条目用状态选择器没反应
button和imagebutton天生具有“可点击(click)”.“可按下(press)”的特性,radiobutton具有“可勾选(check)”的特性,但是listview的条目只有“可按下( ...
- 近十年one-to-one最短路算法研究整理【转】
前言:针对单源最短路算法,目前最经典的思路即标号算法,以Dijkstra算法和Bellman-Ford算法为根本演进了各种优化技术和算法.针对复杂网络,传统的优化思路是在数据结构和双向搜索上做文章,或 ...
- Qt学习之系列[9] – QCoreApplication:processEvents()可能会引起递归,导致栈溢出崩溃
api含义:QCoreApplication::processEvents() 将处理所有事件队列中的事件并返回给调用者. 问题描述: 当主线程在某个槽函数里正在执行processEvents时, 刚 ...
- perl-cgi高级
来源: http://www.cnblogs.com/itech/archive/2012/10/07/2714393.html 一 CGI.pm中的方法(routines)调用 1. CGI.pm ...
- jQuery实现DIV拖动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- maven source
accepted To download sources for your dependencies: mvn eclipse:eclipse -DdownloadSources=true To at ...
- Windsock套接字I/O模型学习 --- 第三章
1. WSAAsyncSelect 模型 WSAAsyncSelect 模型比较简单,是为了适应Windows的消息驱动环境而设置的,WSAAsyncSelect 函数自动把套接字设为非阻塞模式.MF ...
- Net Protocol Related
Data used to deliver through net should be encapsulated. General encapsulation include 4 layer of he ...
- 运行第一个SparkKPI程序
1.复制一个examples中SparkPi.scala到IntelliJ IDEA编辑器,运行,出现错误: “org.apache.spark.SparkException: A master UR ...