js冒泡

什么是JS事件冒泡?:
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
如何来阻止Jquery事件冒泡?

通过一个小例子来解释

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5"%>

<!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 runat="server">
<title>Porschev---Jquery 事件冒泡</title>

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

</head>
<body>
<form id="form1" runat="server">
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层!')">
<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里层!')">点击我</a>
</div>
</div>
</form>
</body>
</html>
比如上面这个页面,
分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;
他们都有各自的click事件,最里层a标签还有href属性。

运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层
---->然后再链接到百度.

这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。
事件冒泡过程(以标签ID表示):hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

如何来阻止?

1.event.stopPropagation();
 <script type="text/javascript">

        $(function() {
            $("#hr_three").click(function(event) {
                event.stopPropagation();
            });
        });

<script>
再点击“点击我”,会弹出:我是最里层,然后链接到百度

 2.return false;
如果头部加入的是以下代码
<script type="text/javascript">

$(function() {
$("#hr_three").click(function(event) {
return false;
});
});

<script>
再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面

由此可以看出:
1.event.stopPropagation();
   事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)

2.return false;
   事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)

还有一种有冒泡有关的:
3.event.preventDefault();
   如果把它放在头部A标签的click事件中,点击“点击我”。
   会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度

    它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)
时间: 2024-12-21 21:13:19

js冒泡的相关文章

JS冒泡事件的快速解决方法

 这篇文章主要是对JS冒泡事件的快速解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 何为冒泡事件 就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作.但是父div的onclick事件同样会被触发.这就造成了事件的多层并发,导致了页面混乱.这就是冒泡事件.   消除冒泡事件的方法 阻止JavaScript事件冒泡传递(cancelBubble .stop

Js冒泡事件详解及阻止示例

 如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播 Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数.  如下例所示:   代码如下: <html>  <script type="text/javascript" src="jquery-1.7.1.js"></script> 

Js 冒泡事件阻止

原文:Js 冒泡事件阻止1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:$(document).ready(function(

JS冒泡事件与事件捕获实例详解_javascript技巧

本文实例分析了JS冒泡事件与事件捕获.分享给大家供大家参考,具体如下: 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> <script type="text/javascript"> window.onload = function(){ window.onclick = function(){ alert("Window"); // 顶

js冒泡、捕获事件及阻止冒泡方法详细总结_javascript技巧

javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结. 事件冒泡是一个从子节点向祖先节点冒泡的过程: 事件捕获刚好相反,是从祖先节点到子节点的过程. 给一个jquery点击事件的例子: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <meta charset="utf-8"> <title>test</title> <head> <scrip

JS冒泡事件的快速解决方法_javascript技巧

何为冒泡事件就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作.但是父div的onclick事件同样会被触发.这就造成了事件的多层并发,导致了页面混乱.这就是冒泡事件. 消除冒泡事件的方法阻止JavaScript事件冒泡传递(cancelBubble .stopPropagation) 下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果 复制代码 代码如下: <ht

Js 冒泡事件阻止实现代码_javascript技巧

1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码: 复制代码 代码如下: $(document).ready(function(

js冒泡法和数组转换成字符串示例代码_javascript技巧

js代码: 复制代码 代码如下: window.onload = function(){ var mian = document.getElementById( "mian" ); var mian1 = document.getElementById( "mian1" ); var str = mian.innerHTML; var arry = []; var len = str.length; for( var i = 0; i < len; i++ )

山寨版AS3事件冒泡机制的实现

AS3实现了事件传递,分成三段Capture,target和bubble,其中bubble就是向树根传递.这个机制非常之经典和好用,可惜它只存在在基于DisplayObject的对象树中,其它时候只能把事件老老实实的从一个对象直接传递到另一个对象. 这次我来玩个有趣的.仿造AS3内置的机制来制作一个更加通用的冒泡框架,相信可以用很多用处(至少已经用在我的项目上了).自己实现事件传递,让它支持任何事件任何数据结构(无论队列,还是树),甚至可以传递任何对象(而不仅限于事件对象).其实bubble的过