点击除元素以外的任意地方隐藏元素js

比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图

该筛选器class名

 1  $(document).click(function () {
 2       $(".subMenu").hide();
 3 });
 4  $(".subMenu").on("click", function (event) {
 5       //取消事件冒泡
 6       var e = arguments.callee.caller.arguments[0] || event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容
 7       if (e && e.stopPropagation) {
 8           // this code is for Mozilla and Opera
 9           e.stopPropagation();
10       } else if (window.event) {
11           // this code is for IE
12           window.event.cancelBubble = true;
13       }
14 });

首先点击document任意位置隐藏该元素,然后给该元素绑定click事件,阻止冒泡到该元素,则可以顺利实现需求。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏安富莱嵌入式技术分享

emWin实现ATM机界面设计,含uCOS-III和FreeRTOS两个版本

第1期:ATM机 配套例子: V6-900_STemWin提高篇实验_ATM机(uCOS-III) V6-901_STemWin提高篇实验_ATM机(FreeR...

14510
来自专栏web前端

02移动端布局

  一、rem      1、意义:当px固定宽度不能适应不同屏幕尺寸时,布局需要,从而产生rem      2、rem 和 em 区别           2...

21890
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种更新的控件

Windows 8.1 除了新增了很多很有用的控件外,还对一些控件做出了更新。接下来我们一起对这些更新的控件一一做出讲解。 1. FlipView 更新 翻转视...

37680
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

24360
来自专栏Jerry的SAP技术分享

微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二...

16020
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

33880
来自专栏全沾开发(huā)

React-native踩坑小记

React-native踩坑小记 最近开始研究ReactNative咯,大概一两周了吧已经,略略说一下遇到的一些坑爹问题 问题一般都...

80680
来自专栏前端菜鸟变老鸟

setTimeout定时器以及部分小知识点

思路:加一个标记flag,开始执行之后改变flag为原来的值并启动定时器,暂停的时候改变flag的值。

7820
来自专栏游戏杂谈

AS3给图片加水印文字

通过FileReference获取选中的图片,调用它的load方法,将图片存入到内存中。使用Loader(flash.display.Loader)类的loa...

12220
来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

33170

扫码关注云+社区

领取腾讯云代金券