需求：对于区块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. YSLOW

    什么是YSlow? YSlow是Yahoo发布的一款基于FireFox的插件. 如何安装YSlow? 安装YSlow必须首先先安装 Firebug,然后下载YSlow,再对其安装. YSlow有什么用 ...

  2. 【HDU】4418 Time travel

    http://acm.hdu.edu.cn/showproblem.php?pid=4418 题意:一个0-n-1的坐标轴,给出起点X.终点Y,和初始方向D(0表示从左向右.1表示从右向左,-1表示起 ...

  3. Android -- 编辑框更改样式

    1. 效果图

  4. UITableView常见 UI 问题总结

    一,经历 1.让 group 形式的UITableView的单元格也可以修改separatorStyle属性来设置. 2.修改group形式的UITableView的 cell 之间的间距,可以更改s ...

  5. linux 中修改root的密码

    修改root密码 有的时候会出现忘记了root 用户密码的情况,再次我们可以通过进入single(单)用户模式,将root的密码重新设置,然后重启登录即可. 具体流程: 1.先登录root用户(密码已 ...

  6. SQL Server 插入数据后获得自增主键值

    通过SQLServer系统自带函数获取 String sql = "insert into goods values('" + TextBox1.Text + "',&q ...

  7. .net的五层架构

    原文章地址是http://www.360doc.com/content/11/1210/21/19147_171335782.shtml 我们刚开始学习架构的时候,首先会想到分层的概念,分层架构比较经 ...

  8. dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题

    做拖拽相关效果时,想在ondragover时给被拖拽元素添加一些样式,于是在dragover事件的函数中通过dataTransfer.getData()获取在dragstart中设置的数据,然而发现d ...

  9. 32位的Win7系统下安装64位的Sql Sever？

    来自:http://zhidao.baidu.com/link?url=nQBoaLgoOyYCUdI7V4WZCMlTW3tKscdkOnLTIvlYtPpwoVhQkSahq44HeofBfzFT ...

  10. ubuntu 安装 wkhtmltopdf 的方法

    参考自:http://vivianyw.blog.163.com/blog/static/1345474222014334256367/ wkhtmltopdf有编译好的Linux版本,找到http: ...