jQuery中on绑定事件后引发的事件冒泡问题如何解决

2024-10-03 04:51:33

用on绑定时，我把子元素的绑定到 document，而把父元素绑定到上级元素，导致 return false 阻止冒泡无效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件冒泡</title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$(document).on("click","#p1",function(e){
console.log(e.target.tagName);
console.log("p1被点击了");
//e.stopPropagation(); //终止冒泡的方法
return false;
})
$("#aa").on("click","#td1",function(e){
console.log(e.target.tagName);
console.log("td1被点击了");
})
$("#aa").on("click","#tr1",function(e){
console.log(e.target.tagName);
console.log("tr1被点击了");
})
$("#aa").on("click","#table1",function(e){
console.log(e.target.tagName);
console.log("table1被点击了");
})
});
</script>
</head>
<body id="aa">
<table onclick="alert('这是table')">
<tr onclick="alert('这是tr')">
<td onclick="alert('这是td')">
<p onclick="alert('这是p')">段落</p>
</td>
</tr>
</table>
<table id="table1">
<tr id="tr1">
<td id="td1">
<p id="p1">你好</p>
</td>
</tr>
</table>
</body>
</html>

on方法将click等事件绑定在document对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理。

增加了绑定效率。当事件冒泡到document对象时，检测事件的target，如果与传入的选择符（这里是button）匹配，就触发事件，否则不触发。

修改为统一绑定对象后即解决，初步认为是因为 on方法的绑定机制问题。

所以return false 无效。子元素和父元素修改为相同绑定元素后，问题解决

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件冒泡</title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#aa").on("click","#p1",function(e){
console.log(e.target.tagName);
console.log("p1被点击了");
//e.stopPropagation(); //终止冒泡的方法
return false;
})
$("#aa").on("click","#td1",function(e){
console.log(e.target.tagName);
console.log("td1被点击了");
})
$("#aa").on("click","#tr1",function(e){
console.log(e.target.tagName);
console.log("tr1被点击了");
})
$("#aa").on("click","#table1",function(e){
console.log(e.target.tagName);
console.log("table1被点击了");
})
});
</script>
</head>
<body id="aa">
<table onclick="alert('这是table')">
<tr onclick="alert('这是tr')">
<td onclick="alert('这是td')">
<p onclick="alert('这是p')">段落</p>
</td>
</tr>
</table>
<table id="table1">
<tr id="tr1">
<td id="td1">
<p id="p1">你好</p>
</td>
</tr>
</table>
</body>
</html>

以上所述是小编给大家介绍的jQuery中on绑定事件后引发的事件冒泡问题及解决办法，希望能够帮助到大家！

jQuery中绑定事件bind() on() live() one()的异同

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------
jQuery绑定事件on()与弹窗的简要概述

页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现. 如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的"立即去使用"链接点击后,实现的效果是关闭弹窗,并跳转到锚点. 这个a标签是: <astyle="display:" title="立即去使用" target="_blank" gid="167
Jquery on方法绑定事件后执行多次的实现方法

这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("
浅谈jquery之on()绑定事件和off()解除绑定事件

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数参数描述 events 可选/S
jQuery中对未来的元素绑定事件用bind、live or on

对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 复制代码代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){
jquery新的绑定事件机制on方法的使用方法

浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有 bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔的
jQuery中用on绑定事件时需注意的事项

随着jQuery版本的更新,以前版本的Bind(),live(),delegate()事件可以直接被on代替,本次笔记仅以点击事件为例,主要考察了on事件的用法: 一.用on监听点击事件前添加的DOM,可以正常触发: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #test { height: 100
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式复制
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)

1.one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:one(type, [data], fn) 其中参数type为事件类型,即需要触发什么类型的事件:参数data为可选参数,表示作为event.data属性值传递给事件对象的额外数据对象:fn为绑定事件时所要触发的函数. 2.示例代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h
jQuery中on绑定事件后引发的事件冒泡问题如何解决

用on绑定时,我把子元素的绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
jQuery中slideUp 和 slideDown 的点击事件

先贴代码,再讲详细事件复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> </head> <styl
JQuery中Ajax的Post提交在IE下中文乱码的解决方法

引言: 在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,该如何解决呢? 问题的引入: 复制代码代码如下: var regid = $('#oregion').combobox('getValue'); //var sname = $('#sname').val(); var sname = encodeURI($('#sname').val(),"UTF-8"); if(regid!=""&&regid!='und
jQuery中animate动画第二次点击事件没反应

用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码代码如下: $(".page").stop().animate({top:"-300px"}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部-300px的位置,第二次点击时的并不是page在移动后的位置继续t移动-300px,
JQuery中DOM事件冒泡实例分析

本文实例分析了JQuery中DOM事件冒泡.分享给大家供大家参考.具体分析如下: 什么是冒泡在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件. <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <script type=&qu
深入理解jQuery中的事件冒泡

1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="
JQuery中DOM加载与事件执行实例分析

本文实例讲述了JQuery中DOM加载与事件执行原理.分享给大家供大家参考.具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能
jquery中的常用事件bind、hover、toggle等示例介绍

1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序
jQuery中的常用事件总结

1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序

jQuery中on绑定事件后引发的事件冒泡问题如何解决

相关推荐

随机推荐