需求：对于区块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. 20161004 NOIP 模拟赛 T1 解题报告

    第1题  小麦亩产一千八 [问题描述] “有了金坷垃,肥料一袋能顶两袋撒,小麦亩产一千八,吸收两米下的氮磷钾……”,话说HYSBZ(Hengyang School for Boys & Zy) ...

  2. 匈牙利 算法&模板

    匈牙利 算法 一. 算法简介 匈牙利算法是由匈牙利数学家Edmonds于1965年提出.该算法的核心就是寻找增广路径,它是一种用增广路径求二分图最大匹配的算法. 二分图的定义: 设G=(V,E)是一个 ...

  3. jsonkit mrc于arc混编

  4. mongodb数据导入导出以及备份恢复

    昨日在公司收到游戏方发来一个1G多的数据文件,要求导入联运账号中.细细一看,纳尼!文件竟然是BSON格式. 哇塞,这不是去年给大家分享的NoSql中的MongoDB的备份文件吗? 于是搭好环境 1.启 ...

  5. JavaWeb动态导出Excel可弹出下载

    由于项目需求,需要将数据导出成Excel表格,并且可选择导出项,可下载.项目使用的Spring+Mybatis+SpringMVC框架,利用Apache POI导出Excel.POI具体使用请自行百度 ...

  6. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  7. Android常用功能代码块

    1.设置activity无标题,全屏 // 设置为无标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); // 设置为全屏模式 getWindow(). ...

  8. ubuntu安装Lua

    1.网站下载LUA包 curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz 2.下载ubuntu的编译支持sudo apt-get install bu ...

  9. SBT Assembly - Deduplicate error & Exclude error

    sbt assembly java.lang.RuntimeException: deduplicate: different file contents found in the following ...

  10. hdu Virtual Friends

    这题是一个很简单额并查集的题目,首先第一步是要用map将字符串映射为整型,这样方便后面的处理,然后就是用一个rank[]数组来记录每个朋友圈的人数.之后就是简单的并查集操作了. 这里给出一组测试案例: ...