需求：对于区块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. c++ 关于new文件

    new文件用来管理c++的动态内存,这个文件声明了几个全局空间的函数(不是std空间的函数,全局空间的函数调用时是用全局作用域解析符),包括operator new 和operator delete的 ...

  2. Javascript 多浏览器兼容性问题及解决方案

    一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document. ...

  3. [深入浅出WP8.1(Runtime)]浮出控件（Flyout）

    4.15 浮出控件(Flyout) 浮出控件(Flyout)是一个轻型的辅助型的弹出控件,通常会作为提示或者要求用户进行相关的交互来使用.Flyout控件与Windows Phone里面的弹出框Mes ...

  4. css切背景图片（background-position）

    给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...

  5. GX转账站点无法访问的问题

    1.先检查200路由器上的端口<8099,8098> 没有则加上 2.检查站点是否能在200服务器上打开 不能打开,重启站点

  6. ckedit 文本编辑器

    Ckeditor是一个功能非常强大的富文本编辑器,博客园有使用此编辑器,其功能完全可以与MS的Word媲美. 用起来也非常方便.下面是本人总结的安装步骤: 第一步,从http://ckeditor.c ...

  7. 关于Android2.X系统自定义图片圆角BUG的解决

    今天在做项目的时候遇到的一个问题. 预期的效果是这样的:

  8. Centos Odoo Service Config

    #!/bin/sh ### BEGIN INIT INFO # Provides: openerp-server # Required-Start: $remote_fs $syslog # Requ ...

  9. 解决mysql5.6+在zabbix监控中执行脚本出现密码的错误问题

    1.mysql命令行中授权mysql监控所需的账号和密码(权限select权限即可) 2.通过mysql_config_editor 配置登录问题: [root@back_zabbix_100 scr ...

  10. set的用法

    set提供一个不重复元素的集合,一般不能直接修改元素.因为这样可能会造成重复元素因此必须删除旧元素,再插入新元素.看下面程序:分析每句的功能.#include<set>#include&l ...