最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击。
后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了。

背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择,但是要点击滚动条的时候会隐藏掉,也就是点击不了滚动条。

思路:写一个Document级别的事件,监听MouseDown事件,判断点击区域进行判断是否要隐藏这个下拉Div。

JS版实现:

 
$(document).bind('mousedown',function(event){
            var $target = $(event.target);
            if((!($target.parents().andSelf().is('#' + suggestContainerId)))&& !$target.is('#' + target) ){
                if($('#' + target).is(":focus")||$('#' + suggestContainerId).is(":focus")){
                    $('#' + suggestContainerId).hide();
                    $('#' + target).val("");
                }else{
                    $('#' + suggestContainerId).hide();
                }
           }
 });


AngularJs版本实现:
define(['angular'], function(){
    var commonDirectives = angular.module("commonDirectives", []);
    commonDirectives.directive("zoneClick", function(){
        return {
            restrict: "AE",
                scope:{
                      skey:"=",//控制显示隐藏的Key
                      sid:"@"//手动传入一个ID
                 },
        link: function(scope, element, attrs){
                scope.$watch('', function (o, n) {
                    $(element[0]).attr("id",scope.sid);
                      $(document).bind('mousedown', function (event) {
                          var $target = $(event.target);
                          if (!($target.parents().andSelf().is("#"+scope.sid))) {
                              scope.$apply(function(){
                                  return scope.skey = false;
                                })
                          }else{
                              scope.$apply(function(){
                                  return scope.skey = true;
                                })
                          }
                      });
                  });
        }
          }
    })
})

注:('#' + suggestContainerId)和 ('#' + target)是当前场景下的ID;

var target=target = (event.target); 这一步是得到当前的目标点击对象。




注:(’#’ + suggestContainerId)和 (’#’ + target)是当前场景下的ID;
var target=(event.target); 这一步是得到当前的目标点击对象。

Js-Html 前端系列--点击非Div区域隐藏Div的更多相关文章

  1. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  2. React 点击按钮显示div与隐藏div,并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  3. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  4. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  5. 点击页面任何位置隐藏div

    <include file="Public:header" /> <style type="text/css"> table{width ...

  6. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  7. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  8. jquery实现点击div外隐藏div

    html <div style="width:100px;height:100px;border:1px solid #ff0" id="div"> ...

  9. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

随机推荐

  1. SQL点滴28—一个简单的存储过程

    原文:SQL点滴28-一个简单的存储过程 在表中写入一条数据同事要向另外一个表中写入信息,所以会使用到事务.实际使用的时候还会一次向一个表中吸入多条数据,下面的存储过程,将字符串拆分成数组然后写入到表 ...

  2. Python开发环境Wing IDE使用教程:部分调试功能介绍

    下面是用户应该了解的Wing IDE的其它一些调试功能: Main Debug File—用户可以指定项目中的一个文件作为调试的主入口点.当完成这个设置之后,调试总是从这个文件开始,除非用户使用Deb ...

  3. javascript 正则介绍

    1.正则直接量字符 \o NUL字符(\u000)\t 制表符\n 换行符(\u000A)\v 垂直制表符\f 换页符\xnn 由16进制nn指定的拉丁字符\uXXXX 由16进制XXXX指定的unc ...

  4. ShopEx4.8.5.55328破解版

    ShopEx4.8.5.55328最新版完美破解版 http://club.1688.com/article/30369057.html?domainid=lhy16868 ShopEx4.8.5.5 ...

  5. discuz 门户页模板中的keywords和description不能正常显示

    最近用discuz搭建了一个素食网,在处理门户页模板时,发现虽然在后台的seo设置了keywords和description,但是以游客的身份访问时,不显示后台设置的内容,显示为: <meta ...

  6. 企业架构研究总结(40)——TOGAF架构能力框架之架构合同、成熟度模型和架构技能框架

    5. 架构合同 架构合同是在开发团体和赞助者之间关于架构的交付物.质量以及适用目标的联合协议,并且通过有效的架构治理将会促使这些协议的成功施行.通过对合同的管理施行一个治理方法,如下几点将会得到保障: ...

  7. Js中call apply函数以及this用法

    this介绍: C#里this关键字的意义比较确定的.JavaScript的this关键字,随着函数使用场合不同,this的值会发生变化,感觉用法比较混乱,所以,现在是有必要整理一下的时刻了! 总结一 ...

  8. Go Code

    目录 备注工作空间(Workspaces)GOPATH环境变量包路径(Package Path)你的第一个程序你的第一个类库包名字(Package Name)测试集成备注 备注返回目录 此文主要是对官 ...

  9. socket网络编程快速上手(二)——细节问题(4)

    5.慢系统调用及EINTR 还记得前面readn和writen函数么?里面有个EINTR,现在就来谈谈这个,这个很重要. Linux世界有个叫信号的东西,感觉他就像一位隐士,很少遇到他,而他又无处不在 ...

  10. unittest 框架

    unittest 框架 学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试 ...