jquery对事件冒泡的处理方法

最新推荐文章于 2022-08-23 15:29:13 发布
最新推荐文章于 2022-08-23 15:29:13 发布
阅读量48 收藏
点赞数
文章标签： jquery div function 浏览器 class 扩展

1.什么是事件冒泡：

页面上有好多事件，也可以多个元素响应一个事件.假如:

<BODY οnclick="alert('aaa');">
<div οnclick="alert('bbb');">
<a href="#" class="cooltip" title="这是我的超链接提示1。" οnclick="alert('ddd');>

提示

</a>
</div>
</BODY>

上面这段代码一共有三个事件,body，div，a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是：a --> div --> body 。a冒泡到div冒泡到body

2.事件冒泡引发的问题。

本来在上面的代码中只想触发<a>元素的onclick事件，然而<div>,<body>事件也同时 触发了。因此我们必须要对事件的作用范围进行限制。当单击<a>元素的onclick事件时只触发<a>本身的事件。由于IE- DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递，我们可以用 event.stopPropagation()阻止事件的传递行为.

3.jQuery对这个问题进行了必要的扩展和封装.

$("element").bind("click",function(event){

//event为事件对象

//.........

event.stopPropagation(); //停止事件冒泡

});

4.阻止默认行为

网页中的某些元素是有自己的默认行为的，比如果超链接单节后需要跳转，提交按钮点击后需要提交表单，有时需要阻止这些行为，也就是默认行为。

jquery中可用用preventDefault()的方法来阻止元素的默认行为.

$('#submit').bind('click',function(event){

var username = $('#username').val();

if(username==""){

alert('用户名不能为空!');

event.preventDefault(); //阻止默认行为

}

})

5.jquery中对冒泡和默认行为的阻止方法同样也可以改写，改写后能够达到同样的效果

event.preventDefault(); 改写为： return false;

event.stopPropagation(); 改写为： return false;

PS:推荐大家不要图省事，任何时候都写return false;

一般情况下都是需要阻止默认行为。不要阻止事件冒泡。

施瓦兴哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中事件冒泡现象分析与解决
FreeSpider
06-01 1062
事件冒泡的原理 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事 件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的 父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最 顶层，即document对象（有些浏览器是window）。 其实在事件冒泡之前...
利用JQuery阻止事件冒泡
01-19
但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。 通俗点来说吧，你在家里看电视，躲在自己的小房间，...
如何解决jQuery事件冒泡和默认行为
surprise_bao的博客
05-06 199
如何解决jQuery事件冒泡和默认行为 什么是事件冒泡 由子元素触发了事件就会向父元素冒泡;并会响应 如何阻止事件冒泡 $(".son").click(function () { console.log(123); return false; // 第一种阻止方式 }) $(".son").click(function (event) { console.log(123); ...
Jquery 事件冒泡的介绍以及如何阻止事件冒泡
码海泛舟的博客
07-21 3002
什么是JS事件冒泡？      在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
jQuery 事件冒泡
柯晓楠
11-28 2933
jQuery 事件冒泡解释 官方解释： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 草根解释： 当我们在某一个元素上去触发一个事件时，比如鼠标移动事件，该元素所绑定的事件也会影响到其子元素，或者是在
jQuery 事件冒泡及解决
m0_56557880的博客
10-08 522
在jQuery中点击触发事件的时候，有时候会导致其他事件一同触发，其他事件一般为该盒子的父元素的事件：例如创建一个div里面包含一个div： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
jQuery中常见的事件处理方法、事件的冒泡、事件对象
weixin_46065214的博客
08-23 463
jQuery中常见的事件处理方法、事件的冒泡、事件对象
android 事件冒泡,jQuery停止事件冒泡
weixin_39581995的博客
05-27 130
event.stopPropagation();在jQuery中提供了stopPropagation()方法来停止事件冒泡。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。在事件的处理中，可以阻止冒泡但是允许默认事件的发生。$(function(){$("#hr_three").click(function(ev...
jQuery里面处理事件冒泡
赵佳敏的博客
03-18 182
jQuery里面处理事件冒泡一、jQuery处理事件冒泡1.方法1---return false;2.方法2---e.stopPropagation();二、原生js处理事件冒泡三、处理事件默认行为 <div class="box"> <button class="box">按钮</button> </div> 一、jQuery处理事件冒泡 1.方法1—return false; var count = 0; $('.
[转]jquery对事件冒泡的处理方法
weixin_30507269的博客
07-11 40
原文地址：http://www.cnblogs.com/zhujie/archive/2011/02/11/1951533.html 1.什么是事件冒泡： 页面上有好多事件，也可以多个元素响应一个事件.假如: <BODY onclick="alert('aaa');"> <div onclick="alert('bbb');"> <a href="...
JavaScript和JQuery的鼠标mouse事件冒泡处理
10-24
主要介绍了JavaScript和JQuery的鼠标mouse事件冒泡处理,本文总结出了mouse事件的一些定论,并分别给出了JavaScript和JQuery测试代码,需要的朋友可以参考下
事件冒泡是什么如何用jquery阻止事件冒泡
12-12
例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让...
Jquery阻止事件冒泡 event.stopPropagation
12-11
描述： 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。 version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过...
jquery 事件冒泡的介绍以及如何阻止事件冒泡
10-27
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，...
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
node-v0.10.27-x86.msi
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
课设毕设基于SSM的高校二手交易平台-LW+PPT+源码可运行.zip
05-16
课设毕设基于SSM的高校二手交易平台--LW+PPT+源码可运行
jquery事件绑定 冒泡
09-09
在jQuery中，可以使用事件绑定方法来处理事件冒泡。jQuery提供了多种事件绑定的方法，其中常见的是`on()`方法和`bind()`方法。这些方法可以用于绑定事件处理程序，并且默认情况下会处理事件冒泡。 例如，使用`on()`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值