最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击。
后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个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. Linux---江湖

    Linux江湖13:我该如何备份系统 Posted on 2014-12-18 10:39 京山游侠 阅读(497) 评论(3) 编辑 收藏 在前面的一些文章中,我反复提到经常会把系统搞崩溃,所以备份 ...

  2. 怎样在Upstart机制下的系统中加入upstart事件型的任务

    /*********************************************************************  * Author  : Samson  * Date   ...

  3. leetcode第22题--Merge k Sorted Lists

    problem:Merge k sorted linked lists and return it as one sorted list. Analyze and describe its compl ...

  4. svn外网访登录不进去提示证书错误Authorization Required

    为了外网能访问内网svn.于是坐在外网端口映射.但是奇怪的是内网能访问,外网总也登录不进去.以为是浏览器版本低 但是其他浏览器也一样.最后客户端也登录不进去.提示报错:  Authorization  ...

  5. C#基础知识梳理索引

    C#基础知识梳理索引 一 引子 之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...

  6. treeview和listview的用法

    今天无聊中弄了个小东西,熟悉一下对listview和treeview的用法.代码如下:  public partial class Form1 : Form     {         private ...

  7. SQL Server的数据加密简介

    防止开发人员获取到敏感数据(SQL Server的数据加密简介) 背景 有时候,我们还真的会碰到这样的需求:防止开发人员获取到敏感数据.也许你觉得很简单,把开发和运营分开不就可以了吗?是的,如果公司有 ...

  8. div光标定位问题总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 免费UI框架推荐--Charisma UI

    基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 在项目设计和开发工作中,做过一些后台管理系统的设计和开发,用的很多都是比较传统的UI框架. 老是走在这个圈子里 ...

  10. CenOS下安装Eclipse并配置PyDev

    为方便安装,使用SecureCRT来操作CentOS 1. 更改网络配置 虚拟机使用桥接方式上网(默认是NAT方式) 2. 启动后让虚拟机上网 3. 启动终端查看ip地址 4. 使用SecureCRT ...