需求：对于区块div内点击事件， 需要展示区块内的附属操作区块，对于区块外的点击， 需要将前面说的附属操作区块隐藏掉。

　　分析：对于一般的HTML控件，有标准的js事件接口， focus和blur，来实现类似效果， 在focus中添加显示附属控件操作， 在blur中隐藏掉。例如 文本输入框， 和 image 类型的input， 但是对于设计出的样式不能通过这类控件来表达时候，就需要使用div框来设计布局，虽然HTML控件具有更好的accessibility。

　   技术思路：事件event在DOM树中是不断冒泡，向上层传递的，直到DOM根节点document停止，在事件发生或者传递的过程中， 任意传递路径上的DOM元素的事件处理函数， 中都可以终止事件扩散（propagation）。

　　验证冒泡传递消息机制，如下代码，执行效果，点击“click me”，事件踪迹会先打印 me is clicked，然后打印document is clicked。

 <!DOCTYPE html>

 <html>

 <head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

 </script>

 </head>

 <body>

 <div id="target_div" style="width:200px;height:200px;background:yellow;margin:auto">click me</div>

 <br/>

 <br/>

 <br/>

 clicked event bubble up trace:

 <div id="eventClickLog"></div>

 <script>

 $("#target_div").click(function(event){

     $("<div/>").append("me is clicked")

         .appendTo($("#eventClickLog"));

 });

 $(document).click(function(event){

     $("<div/>").append("document is clicked")

         .appendTo($("#eventClickLog"));

 });

 </script>

 </body>

 </html>

　　根据JQuery官方文档 http://api.jquery.com/event.stoppropagation/ 介绍 如下接口可以prevent事件向上传递

event.stopPropagation()

　　或者使用 return false 来实现相同的效果，这样点击区块内，只有打印 me is clicked， 点击区块外，只打印document is clicked，可满足区分区块点击事件区域的需求。给出拦截效果代码：

 <!DOCTYPE html>

 <html>

 <head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

 </script>

 </head>

 <body>

 <div id="target_div" style="width:200px;height:200px;background:yellow;margin:auto">click me</div>

 <br/>

 <br/>

 <br/>

 clicked event bubble up trace:

 <div id="eventClickLog"></div>

 <script>

 $("#target_div").click(function(event){

     $("<div/>").append("me is clicked")

         .appendTo($("#eventClickLog"));

         /* return false or stopPropagation to prevent parent event handler executed. */

     //return false;

     event.stopPropagation();

 });

 $(document).click(function(event){

     $("<div/>").append("document is clicked")

         .appendTo($("#eventClickLog"));

 });

 </script>

 </body>

 </html>

　　

　　

对于指定区块div，如何区分区块内的点击 和 区块外的点击？的更多相关文章

  1. 在指定的div中搜索内容，并滚动显示到当前搜索到的内容处

    我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...

  2. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  3. 使用jQuery加载html页面到指定的div

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  4. 区块链侧链应用开发平台Asch节点安装及区块生产教程

    1 系统要求 必须是linux系统 必须有公网ip 建议使用ubuntu 14.04 64位 建议内存1G以上 建议带宽2Mb以上 2 安装 2.1 下载 wget https://www.asch. ...

  5. 给指定的div增加滚动条

    这次的需求是给一个指定的div(里面有个table表格)增加上下.左右的滚动条 通过查找资料后找到了一个可用的方法,代码如下: <!--div比table大小要小才会显示--> <d ...

  6. 都div在所有li的html()值被设置&quot;哈哈&quot;，当点击设置&quot;我被点击&quot;,其余的还是不点击设置“哈哈”

    <1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. 阿里云服务器 - node启动服务的时候只有监听内网IP才可以供外网访问

    阿里云服务器 - node启动服务的时候只有监听内网IP才可以供外网访问

  8. c++学习笔记之基础---类内声明函数后在类外定义的一种方法

    在C++的“类”中经常遇到这样的函数, 返回值类型名 类名::函数成员名(参数表){ 函数体.} 双冒号的作用 ::域名解析符!返回值类型名 类名::函数成员名(参数表) { 函数体. } 这个是在类 ...

  9. java打印出某一指定路径下的文件夹内的所有子文件夹和文件，并区分开来

    public class printoutFile { public static void main(String[] args) { printFile(new File("D:\\te ...

随机推荐

  1. 20145304 Java第六周学习报告

    20145304<Java程序设计>第六周学习总结 教材学习内容总结 1.InputStream与OutputStream: 在Java中,输入串流的代表对象为java.io.InputS ...

  2. 【BZOJ】2595: [Wc2008]游览计划

    题意 \(n * m\)的网格,如果\(a_{i, j} = 0\)则表示景点,否则表示这里的需要的志愿者人数.求一种安排志愿者的方案使得所有景点连通且志愿者最少. 分析 本题可以插头dp,然而有一个 ...

  3. 【POJ2104/2761】K-th Number

    Description You are working for Macrohard company in data structures department. After failing your ...

  4. Bouncy Castle内存溢出

    现象: 堆内存溢出,java.lang.OutOfMemoryError: Java heap space 用jmap查看,显示 num     #instances         #bytes   ...

  5. 分模块创建maven项目（一）

    maven是一个项目构建和管理的工具. 我们可以通过maven仓库可以实现管理构建(主要是JAR还包括:WAR,ZIP,POM等等). 我们可以通过maven插件可以实现编译源代.产生Javadoc文 ...

  6. Java中的try，catch，finally

    讲解的是关于java中关于try.catch.finally中一些问题 下面看一个例子(例1),来讲解java里面中try.catch.finally的处理流程 public class TryCat ...

  7. Linux_Shell

    一.Shell 种类与归属 Unix与Linux常见的Shell脚本解释器有bash,sh,csh,ksh等(PS: bash 完全兼容sh) bash : linux 默认的shell sh : u ...

  8. MySQL中引号的问题

    原文: http://blog.csdn.net/wisgood/article/details/6317543 mysql中一个字符串,既可以用两个单引号表示,也可以用两个双引号表示. 比如字符串 ...

  9. Daily Scrum 10.25

    今天我们在分析数据库的时候发现还有一些这方面知识上的不足,花费一些额外的时间做功课.这说明当时我们的plan没有做好,但是我们基本还处在进度上. 下面是今天的Task统计:

  10. SpringMVC表单标签简介

    在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需 ...