需求：对于区块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. 预定义指令之debug

    1)根据你必须知道的.NET一书, #define DEBUG class Program { static void Main(string[] args) { #if DEBUG Console. ...

  2. PHP curl 模拟POST 上传文件（含php 5.5后CURLFile）

    <?php /** * Email net.webjoy@gmail.com * author jackluo * 2014.11.21 * */ //* function curl_post( ...

  3. 应对Memcached缓存失效，导致高并发查询DB的四种思路(l转)

    当Memcached缓存失效时,容易出现高并发的查询DB,导致DB压力骤然上升. 这篇blog主要是探讨如何在缓存将要失效时,及时地更新缓存,而不是如何在缓存失效之后,如何防止高并发的DB查询. 解决 ...

  4. About_AJAX_03

    以为AJAX只可以获取一个值呢,原来也是可以拼接的: function sendTopic(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObje ...

  5. （转）深入理解flash重绘

    深入理解Flash Player重绘 Flash Player 会以SWF内容的帧频速度来刷新需要变化的内容,而这个刷新的过程,我们通常称为“重绘(redraw)”,相信即便是初级的菜鸟也知道,只要使 ...

  6. preventDefault（）方法

    该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作). 例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调 ...

  7. 关于http协议的理解

    一.状态码 1.200:请求成功. 2.302:浏览器进行重定向. 3.304:资源已使用,即有缓存. 4.404:请求失败,请求的资源未在服务器上发现. 5.500:服务器端发生错误. 二.php获 ...

  8. php课程---面向对象

    面向对象:一:定义类 class Dog { var $name; var $age; var $pinzhong; function Jiao() { echo "{$this->n ...

  9. Total Commander 常用快捷键（并附快捷键大全）

    Total Commander 常用快捷键 喜欢用Total Commander的人,都会记住它的一些快捷键,这会给你的操作带来很大的方便,以下是经常会用到的快捷键,大家可以记住一些自己用得最多的操作 ...

  10. jquery ajax 对异步队列defer与XMLHttprequest.onload的依赖

    ajax 对异步队列defer与XMLHttprequest.onload的依赖