Html代码如下:

<div id="cover">
<input type="button" id="inside" value="submit_inside" />
</div>
<div id="cover_js">
<input type="button" id="inside_js" value="submit_inside_js" />
</div>
<input type="button" id="outside" value="submit_outside" />

jQuery代码如下:

$('#cover').mouseover(function () {
$('#inside').click(function () {
alert('multiple times');
});
}); $('#cover_js').mouseover(function () {
document.getElementById('inside_js').onclick = function () {
alert('just one time');
}
}); $('#outside').click(function () {
alert('just one time');
});

id 为 inside 的按钮的 click 事件被嵌套在 div 的鼠标事件内,而 id 为 outside 的按钮则未嵌套,分别对两个按钮进行多次点击后,inside 按钮绑定的 click 事件会进行累加,而 outside 按钮则仍旧只绑定一个 click 事件。id 为 inside_js 的按钮的 click 事件也被嵌套在 div 的鼠标事件内,但是我用 javascript 实现 click,此时点击多次后,只触发一个 alert。
解决上述问题可以用 unbind 对嵌套 event 进行解绑:

$('#cover').mouseover(function () {
$('#inside').off.('click').click(function () {
alert('multiple times');
});
});

原因:

jQuery所有的事件(.click.mouseover.hover 等等)都是通过on =>  event.add  =>  addEventListener,来实现的。

代码每次mouseover的时候就多绑定了一次事件回调。
原生的onclick每次赋值都直接覆盖了之前的onclick绑定,所以不推荐这样写。
若是用原生的addEventListener也会得到跟jQuery一样的结果。

jQuery 嵌套 event 会触发多次的原因的更多相关文章

  1. jquery嵌套后会触发2次点击事件, jquery的unbind就是卸载这个点击事件的.

    $("#diva").click(function(){ $("#divb").unbind("click").click(function ...

  2. 深入理解jQuery的Event机制

    jQuery的Event模块非常强大.其功能远远比原生事件监听器强大许多,对同一个元素的监听只用一个eventListener,内部则是一个强大的观察者,根据匹配事件类型触发相应回调.jQuery不仅 ...

  3. jquery中event对象属性与方法小结

    JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的 ...

  4. jquery利用event.which方法获取键盘输入值的代码

    jquery利用event.which方法获取键盘输入值的代码,需要的朋友可以参考下. 实例 显示按了哪个键: $("input").keydown(function(event) ...

  5. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  6. vue和jQuery嵌套实现异步ajax通信

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

  7. jquery 鼠标经过延时触发事件,jquery插件

    jquery 鼠标经过延时触发事件. 用来做:鼠标经过选项卡,延时切换,鼠标经过商城分类延时显示,最好不过,防止用户随便滑动就切换了选项卡. 一.引入jq 二.加入以下插件代码 /* * 鼠标经过延时 ...

  8. 动态生成的DOM不会触发onclick事件的原因及解决方法

    最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment ...

  9. 安装VisualSVN Server 报"Service 'VisualSVN Server' failed to start. Please check VisualSVN Server log in Event Viewer for more details"错误.原因是启动"VisualSVN Server"失败

    安装VisualSVN Server 报"Service 'VisualSVN Server' failed to start. Please check VisualSVN Server ...

随机推荐

  1. sql 随机获取数据

    SQL Server: SELECT TOP 10 * FROM T_USER ORDER BY NEWID() ORACLE: SELECT * FROM (SELECT * FROM T_USER ...

  2. qt5.4解决输出中文乱码问题

    需要在字符串前添加 QString::fromUtf8 例: b2 = new QPushButton(this); b2->setText(QString::fromUtf8("变化 ...

  3. Java提高篇(三):内部类和匿名内部类

    一,内部类 其实内部类是十分简单的,我们根据其字里行间的意义就可以知道内部类应该是一个类当中的一个类,相当于一个类进行了嵌套,就如同循环的嵌套一般. 内部类有一个特征:内部类当中可以调用外部类当中的属 ...

  4. FFmpeg 结构体学习(六): AVCodecContext 分析

    在上文FFmpeg 结构体学习(五): AVCodec 分析我们学习了AVCodec结构体的相关内容.本文,我们将讲述一下AVCodecContext. AVCodecContext是包含变量较多的结 ...

  5. [SQL]LeetCode577.员工奖金 | Employee Bonus

    Select all employee's name and bonus whose bonus is < 1000. Table:Employee +-------+--------+---- ...

  6. [Swift]LeetCode646. 最长数对链 | Maximum Length of Pair Chain

    You are given n pairs of numbers. In every pair, the first number is always smaller than the second ...

  7. [Swift]LeetCode975. 奇偶跳 | Odd Even Jump

    You are given an integer array A.  From some starting index, you can make a series of jumps.  The (1 ...

  8. 非对称加密技术中,iFace [ 爱妃链 ]人脸密钥技术排名第三,将弥补区块链现有不足

    最近,区块链领域,出现了一个比较热门技术的讨论,人脸密钥技术,可能大家还对这个名词感到很陌生,但是熟悉加密技术的技术大牛可能一听就能够明白大体的意思了,但是也正是这一熟悉而陌生的技术名词,掀起了区块链 ...

  9. Xcode 命令行工具 Command Line Tools

    xcode命令行工具包是一个小型独立包,可供下载独立于Xcode的和允许您执行命令行开发OS X. 在OS X10.9,就以及没有clt的下载安装包了,需要使用命令在线安装. xcode-select ...

  10. qt 拖拽 修改大小

    写次篇文章之前,qt窗口的放大缩小和拖拽我都是通过setGeometry方法实现的,但是作为windows程序,windows支持橡 皮筋式(拖拽时有一个虚框)拖拽和拉伸.通过setGeometry方 ...