1、事件冒泡

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

     <head>

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

         <script type="text/javascript">

             $(function() {

                 //为 <span> 元素绑定 click 事件

                 $("span").click(function() {

                     $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");

                 });

                 //为 Id 为 content 的 <div> 元素绑定 click 事件

                 $("#content").click(function() {

                     $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");

                 });

                 //为 <body> 元素绑定 click 事件

                 $("body").click(function() {

                     $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");

                 });

             });

         </script>      

         <!-- CSS -->

         <style type="text/css">

             #content {

                 background: #b17af5;

             }

         </style>

       </head>

       <!-- HTML -->

       <body>

           <div id="content">

               外层div元素<br />

               <span style="background: silver;">内层span元素</span><br />

               外层div元素

           </div><br />

           <div id="msg"></div>

       </body>

 </html>

当点击内部 <span> 元素时，会触发自身及外层 <div> 和 <body> 的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为，使用 stopPropagation() 方法来实现。
修改 <span> 元素的 click 事件函数：

 //为 <span> 元素绑定 click 事件

 $("span").click(function(event) {    //为方法添加一个事件对象参数

     $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");

     event.stopPropagation();    //阻止 <span> 的 click 事件冒泡

 });

此时点击内部 <span> 元素时，只会触发自身的 click 事件，不会再向上冒泡。

jQuery 中的事件冒泡和阻止默认行为的更多相关文章

  1. Javascript和jquery事件--阻止事件冒泡和阻止默认事件

    阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...

  2. jquery 中的事件冒泡

    废话少说,先来一段代码热热身: <!DOCTYPE html> <html> <head> <title>demo</title> < ...

  3. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  4. jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...

  5. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

  6. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  7. 锋利的jQuery-4--阻止事件冒泡和阻止默认行为

    阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", functi ...

  8. javascript 停止事件冒泡以及阻止默认事件冒泡

    停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...

  9. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

随机推荐

  1. Javascript实现图片预加载【回调函数，多张图片】

    使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...

  2. 浏览器兼容innerText nextElementSibling firstElementChild

    //下面是封装的方法,可以直接使用 //获dom对象的innerText的取值 function getInnerText(element){ //判断浏览器是否支持innerText if(type ...

  3. [vijos1459]车展

    [vijos1459]车展 试题描述 遥控车是在是太漂亮了,韵韵的好朋友都想来参观,所以游乐园决定举办m次车展.车库里共有n辆车,从左到右依次编号为1,2,-,n,每辆车都有一个展台.刚开始每个展台都 ...

  4. phpcms中的RBAC权限系统

    PHPCMS中的RBAC权限系统主要用到了4张数据表:管理员表,角色表,菜单表,菜单权限表.先来看看数据库的数据表结构: admin 管理员表 ID 字段 类型 Null 默认 索引 额外 注释 1 ...

  5. webstrom配置sass与less

    1.less 安装一个稳定版的node.[例如node-v4.4.4-x64] 然后直接在webstrom里导入那个lessc.cmd 2.sass 安装ruby. 安装完之后点开,Start那个安装 ...

  6. 【MySQL】常规操作

    2016.4.10 1.MySQL查看系统当前默认自增列种子值和步长值(全局) 1 show GLOBAL VARIABLES like 'auto_incre%'; 2.MySQL查看具体某一张表的 ...

  7. Redis 3.0正式版发布，正式支持Redis集群

    Redis是一个开源.基于C语言.基于内存亦可持久化的高性能NoSQL数据库,同时,它还提供了多种语言的API.近日,Redis 3.0在经过6个RC版本后,其正式版终于发布了.Redis 3.0的最 ...

  8. WCF service 获取 client 端的 IP 和 port （转）

    转帖记录一下,以便日后使用. 主要使用是.NET3.5里的服务端上下文的消息实例的RemoteEndpointMessageProperty属性,获取客户端地址信息.但是限制 的绑定是HTTP.TCP ...

  9. java中集合的使用

    集合使用: 先说数组:array :用来存同一种数组类型的容器 eg:现在想把班上所有人的信息存起来 1.每一个人的信息可以用一个对象存起来 2.可以用一个数组来接受(现在数组中要接受的是对象) ob ...

  10. win7远程桌面连接总是显示凭证不工作解决方法总结

    使用远程桌面连接可以在网络的另一端控制某台计算机,对计算机进行实时操作,但有时会出现连接失败的情况,比如总是显示您的凭证不工作,下面是我对此问题解决办法的总结. 方法一: 1.在开始菜单内的运行框里输 ...