Js-Html 前端系列--点击非Div区域隐藏Div
最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击。
后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个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的更多相关文章
- jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框
- React 点击按钮显示div与隐藏div,并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- 点击页面任何位置隐藏div
<include file="Public:header" /> <style type="text/css"> table{width ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- jquery实现点击div外隐藏div
html <div style="width:100px;height:100px;border:1px solid #ff0" id="div"> ...
- JQ 点击指定文本框显示div。点击其他区域隐藏DIV
<input id="username" type="text" style="width:90%;margin-top: 40px;" ...
随机推荐
- SQL点滴28—一个简单的存储过程
原文:SQL点滴28-一个简单的存储过程 在表中写入一条数据同事要向另外一个表中写入信息,所以会使用到事务.实际使用的时候还会一次向一个表中吸入多条数据,下面的存储过程,将字符串拆分成数组然后写入到表 ...
- Python开发环境Wing IDE使用教程:部分调试功能介绍
下面是用户应该了解的Wing IDE的其它一些调试功能: Main Debug File—用户可以指定项目中的一个文件作为调试的主入口点.当完成这个设置之后,调试总是从这个文件开始,除非用户使用Deb ...
- javascript 正则介绍
1.正则直接量字符 \o NUL字符(\u000)\t 制表符\n 换行符(\u000A)\v 垂直制表符\f 换页符\xnn 由16进制nn指定的拉丁字符\uXXXX 由16进制XXXX指定的unc ...
- ShopEx4.8.5.55328破解版
ShopEx4.8.5.55328最新版完美破解版 http://club.1688.com/article/30369057.html?domainid=lhy16868 ShopEx4.8.5.5 ...
- discuz 门户页模板中的keywords和description不能正常显示
最近用discuz搭建了一个素食网,在处理门户页模板时,发现虽然在后台的seo设置了keywords和description,但是以游客的身份访问时,不显示后台设置的内容,显示为: <meta ...
- 企业架构研究总结(40)——TOGAF架构能力框架之架构合同、成熟度模型和架构技能框架
5. 架构合同 架构合同是在开发团体和赞助者之间关于架构的交付物.质量以及适用目标的联合协议,并且通过有效的架构治理将会促使这些协议的成功施行.通过对合同的管理施行一个治理方法,如下几点将会得到保障: ...
- Js中call apply函数以及this用法
this介绍: C#里this关键字的意义比较确定的.JavaScript的this关键字,随着函数使用场合不同,this的值会发生变化,感觉用法比较混乱,所以,现在是有必要整理一下的时刻了! 总结一 ...
- Go Code
目录 备注工作空间(Workspaces)GOPATH环境变量包路径(Package Path)你的第一个程序你的第一个类库包名字(Package Name)测试集成备注 备注返回目录 此文主要是对官 ...
- socket网络编程快速上手(二)——细节问题(4)
5.慢系统调用及EINTR 还记得前面readn和writen函数么?里面有个EINTR,现在就来谈谈这个,这个很重要. Linux世界有个叫信号的东西,感觉他就像一位隐士,很少遇到他,而他又无处不在 ...
- unittest 框架
unittest 框架 学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试 ...