点击元素，目标元素显示和隐藏。点击其他非指定区域，目标元素隐藏

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>// 点击icon  img显示和隐藏document.getElementById("help_outline_icon").addEventListener('click', function (e) {console.info(e)stopProp(e);$('#serial_no_img').toggle() // img显示和隐藏}, false)// 点击本身，不隐藏document.getElementById("serial_no_img").addEventListener('click', function (e) {stopProp(e);}, false)// 点击其他位置 serial no 提示图片 - 隐藏 $(document).click(function(e){e = window.event || e;var obj = e.srcElement || e.target;if(!$(obj).is('#help_outline_icon_box')) {$('#serial_no_img').hide();}});/*** 阻止事件冒泡*/function stopProp (e) {e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;}</script>
</html>

说明：

1、$(obj).is('#help_outline_icon_box') 为目标检测区域，即为鼠标单击区域是否为指定的div元素或层；

2、(事件对象)IE：有window.event对象
　　火狐：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
　　解决方法：var event = event || window.event;

3、(事件源)IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,
但是没有srcElement属性.

　　解决办法：var obj = e.srcElement || e.target

效果图：

点击元素，目标元素显示和隐藏。点击其他非指定区域，目标元素隐藏相关推荐

小程序点击显示隐藏（点击标题，内容显示，再次点击隐藏，同时切换箭头的状态，且默认第一组的内容显示）
哈喽,大家下午好,时间过的真快,转眼啊又好长时间没写博客啦,嘿嘿最近公司比较忙,手上一直有项目需要处理,现在终于空闲了一点,赶快来一篇呀,嘿嘿~ 最近我一直在做小程序的项目,其中值得一提的是项目中有一 ...
JavaScript - 删除一维数组指定元素（移除一维数组某个项，删除指定的数组元素）
前言假设,您有如下数组: var arr = [ '苹果', '香蕉', '鸭梨' ] 现在您想删除香蕉这个元素,那么该怎么实现呢? 解决方案注意:由于使用了 splice 方法,故会改变原 ...
excel打开空白不显示内容没有隐藏_办公软件操作技巧097：如何隐藏excel表格中没有数据的空白区域...
在日常工作中,我们编辑好了excel表格以后,有时为了突出显示表格数据内容,或者为了后期编辑表格数据区时不受干扰等原因,可以把表格中没有数据的多余空白区域隐藏起来,如下图一为数据正常显示,图二为隐藏空 ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
项目--点击按钮显示资料，点击空白处隐藏资料
点击空白处隐藏资料点击按钮显示资料在这里插入代码片 <!DOCTYPE html> <html lang="en"><head><met ...
【CSS-进阶之元素：focus伪类模拟点击事件】
先放上我们最终实现的效果注:这里建议插入codepen(临时使用图片代替) 我们想要实现当点击某个元素时,显示一个tip浮动框. html: <div class="wrapper& ...
html中searchbutton点击没有反应,点击按钮加载完整的HTML后，使用Selenium加载其他元素...
我想刮一页并收集所有链接.该页面显示30个条目并查看完整列表,点击全部加载按钮是必要的.点击按钮加载完整的HTML后,使用Selenium加载其他元素我使用下面的代码: from selenium ...
原生css页面滑动到指定位置开始动画_html/css 滚动到元素位置，显示加载动画
每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部. 添加初始数据,默认透明度0.左右分别移动100px.//左侧容器 .ite ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：在元素获取焦点时显示(如：键盘操作的用户)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

点击元素，目标元素显示和隐藏。点击其他非指定区域，目标元素隐藏

点击元素，目标元素显示和隐藏。点击其他非指定区域，目标元素隐藏相关推荐

最新文章

热门文章