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;" ...
随机推荐
- Linux---江湖
Linux江湖13:我该如何备份系统 Posted on 2014-12-18 10:39 京山游侠 阅读(497) 评论(3) 编辑 收藏 在前面的一些文章中,我反复提到经常会把系统搞崩溃,所以备份 ...
- 怎样在Upstart机制下的系统中加入upstart事件型的任务
/********************************************************************* * Author : Samson * Date ...
- leetcode第22题--Merge k Sorted Lists
problem:Merge k sorted linked lists and return it as one sorted list. Analyze and describe its compl ...
- svn外网访登录不进去提示证书错误Authorization Required
为了外网能访问内网svn.于是坐在外网端口映射.但是奇怪的是内网能访问,外网总也登录不进去.以为是浏览器版本低 但是其他浏览器也一样.最后客户端也登录不进去.提示报错: Authorization ...
- C#基础知识梳理索引
C#基础知识梳理索引 一 引子 之前曾写了一篇随笔<.NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标> 三个月过去了,目标使更多的编程初学者,轻松高效地掌握C#开发的基础,重 ...
- treeview和listview的用法
今天无聊中弄了个小东西,熟悉一下对listview和treeview的用法.代码如下: public partial class Form1 : Form { private ...
- SQL Server的数据加密简介
防止开发人员获取到敏感数据(SQL Server的数据加密简介) 背景 有时候,我们还真的会碰到这样的需求:防止开发人员获取到敏感数据.也许你觉得很简单,把开发和运营分开不就可以了吗?是的,如果公司有 ...
- div光标定位问题总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 免费UI框架推荐--Charisma UI
基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 在项目设计和开发工作中,做过一些后台管理系统的设计和开发,用的很多都是比较传统的UI框架. 老是走在这个圈子里 ...
- CenOS下安装Eclipse并配置PyDev
为方便安装,使用SecureCRT来操作CentOS 1. 更改网络配置 虚拟机使用桥接方式上网(默认是NAT方式) 2. 启动后让虚拟机上网 3. 启动终端查看ip地址 4. 使用SecureCRT ...