今天在给JQgrid中的标签添加click事件的时候,发现一个问题。

JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox。

查看JQgrid源码,发现它的click事件是绑定到了table上,然后判断事件点击目标,找到选中行给它勾选;而我的click事件是绑定到td里面的div中。

按照事件冒泡的触发顺序,应该是我的事件先触发,之后是JQgrid的事件。

结果不是这样的。我发现JQgrid使用$().click(function(){})绑定的事件,而我使用$("body").on("click","",function(){})绑定的事件。

我希望比较一下它们的差别,专门写了一下代码,查看运行结果。

代码如下:

<div id="div_2" onclick="console.error('onclick_2')">
<div id="div_1" onclick="console.error('onclick_1')">
Click this Div
</div>
</div>

JS:

	$(function(){
$("body").on("click","#div_2",function(){
console.error("on bind click 2");
});
$("body").on("click","#div_1",function(){
console.error("on bind click 1");
});
$("#div_2").click(function(){
console.error("click 2");
});
$("#div_1").click(function(){
console.error("click 1");
});
});

执行结果:

得到结论:

onclick,click,on()的优先关系:onclick>click>on();

onclick和click绑定的事件,彼此之间遵守事件冒泡规则,从内到外触发;

on()绑定的事件,总是晚于onclick和click绑定的事件触发;

由此可以得到,使用on()绑定的事件与onclick和click绑定的事件,判断触发先后顺序时,不能只考虑事件冒泡规则。

  

关于JS 事件冒泡和onclick,click,on()事件触发顺序的更多相关文章

  1. window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理

    window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...

  2. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

  3. JS中的事件冒泡(Bubble)和事件捕获(capture)以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

  4. vue-阻止事件冒泡-开启右键-键盘类事件

    一: 阻止事件冒泡 布局: 当点击按钮时,会触发button的click 也会触发父级的方法 <div id="box"> <div @click="p ...

  5. JS事件冒泡机制和兼容性添加事件

    本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...

  6. 阻止后续事件的发生 onclick 双return 事件绑定(..$).click一个return

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS中绑定事件顺序(事件冒泡与事件捕获区别)

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...

  8. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. 《疯狂Java讲义》(四)---- 面向对象&基于对象

    "基于对象"也使用了对象,但是无法利用现有的对象模板产生新的对象类型,继而产生新的对象,也就是说,"基于对象"没有继承的特点,而多态更需要继承,所以" ...

  2. easyui datagrid columns field 如何支持一个或多个子属性

    //如果只需要一个子属性从value出发 {field:'customer',title:'会员手机',width:100, formatter: function(value,row,index){ ...

  3. linux中的进程和线程

    应用程序:可以被操作系统执行的一组指令和参数的集合,是静态的,并存储在磁盘空间中: 进程:在操作系统中在运行程序后,处于运行状态的程序,是应用程序的一个执行过程,同时也是操作系统分配内存,cpu等系统 ...

  4. IntelliJ IDEA 自动化工具安装并添加自动化测试框架

    IntelliJ IDEA是一个用于开发人员开发和测试人员自动化测试的测试工具,类似于eclipse. 优点:插件多自身可以携带,自身携带cucumber自动化测试框架,类似于junit一样 缺点:r ...

  5. CACTI表结构和数据被动获取

    cacti我们也用了很久了,但是它的表结构一直都没有去关心过,得空抽了半个晚上的时间,把它的库表结构大概看了下,某些字段的含义跟大家分享下:cacti的数据都是存放在rrdtool中的,数据库存放的其 ...

  6. IIS 出现如下错误:PageHandlerFactory-Integrated”

    原因: vs2010默认的是4.0框架,4.0的框架是独立的CLR,和2.0的不同,如果想运行4.0的网站,需要用aspnet_regiis注册4.0框架,然后用4.0的Class池,就可以运行4.0 ...

  7. redis高可用分布式集群

    一,高可用 高可用(High Availability),是当一台服务器停止服务后,对于业务及用户毫无影响. 停止服务的原因可能由于网卡.路由器.机房.CPU负载过高.内存溢出.自然灾害等不可预期的原 ...

  8. 应用Druid监控SQL语句的执行情况

    Druid是什么? Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBo ...

  9. Linux下apache+phppgadmin安装配置

    1.安装pg 安装PostgreSQL数据库 修改pg_hba.conf配置文件,使得数据库可以通过外部访问. 具体可以配置为: # TYPE DATABASE USER ADDRESS METHOD ...

  10. git命令解析

    一 常用命令 1..gitignore 文件为git忽略文件,例*.[oa] *.~ 为忽略.a或.o或.~结尾的文件./表示忽略目录,!表示反取, *表示匹配零个或者多个字符.?表示匹配一个字符. ...