html点击除某个元素之外的元素的事件添加技巧

可以利用css中的z-index属性来完成，先在页面添加一个div，设置这个div的属性为：宽高都为100%，透明属性opacity为0，绝对定位为top：0，left：0，暂且称这个div为a，添加这个a的目的是想将它覆盖在整个页面之上，因为设置了opacity为0，所以是透明的，这是点击任何元素都不会触发它的绑定事件，因为被a给覆盖了，这时将排除之外的元素（也就是除了这个元素外点击其他元素会触发事件的元素）的z-index设置为1000（不管多少，但是要比a高），然后给a添加一个事件（这个事件就是点击除了某个元素之外的元素触发的事件，而这某个元素就是在a之上的元素，因为在a之上，所以点击这个元素不会触发a绑定的事件）
具体看代码
往body中添加div

<div onclick="shade_click()" id="a" style="width:
100%;height: 100%;position: absolute;
top: 0;left: 0;opacity: 0;display: none;">
</div>

//排除之外的元素

<div class="o_categorys" style="z-index: 1000;">
</div>

//添加的事件,点击class为o_categorys这个事件不会触发，点击这个class元素以外的就会触发

function shade_click(){//放入需要执行的点击除某个元素之外的元素的事件代码
}

这样做有个缺点就是被a（也就是我们添加的这个div）覆盖的元素的事件不会生效，不过也无妨，可以在事件触发了之后设置这个div的display为none，也就是隐藏它即可
欢迎访问本人的个人网站：个人网站

html点击除某个元素之外的元素的事件添加技巧相关推荐

jquery实现点击某元素之外触发事件
jq如何实现这个功能呢?其实也不难,大概思路就是,在document上面绑定一个事件,当用户触发document的事件时,判断一下目标元素是什么,然后再执行相应的操作就行了. <script&g ...
js点击元素之外的地方隐藏该元素
有时候我们会有这种情况,点击按钮(或者指定元素)显示一个菜单栏,点击按钮和菜单栏外的区域隐藏菜单栏: 主要运用阻止事件冒泡来实现:下面是全部代码: <!DOCTYPE html> < ...
vue实现点击某个dom元素之外的方法
在项目开发中搜索按钮点击出现搜索框内容,这个时候点击搜索框以外的内容,搜索框隐藏掉,如下所示: 1.源码 2.实现点击其他区域搜索框内容隐藏,如下: document.addEventListener ...
js获取被点击的元素以及子元素
js获取被点击元素: 可参见原demo:https://github.com/liyuanhong/learn-js-css-html5/tree/master/html <!DOCTYPE h ...
android+点击屏幕隐藏键盘,Android点击EditText文本框之外任何地方隐藏键盘的解决办法...
1,实现方法一: 通过给当前界面布局文件的父layout设置点击事件(相当于给整个Activity设置点击事件),在事件里进行键盘隐藏 android:id="@+id/traceroute ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
Vue 点击获得父元素，子元素，兄弟元素（DOM操作）
<ul @click ="clickfun($event)"><li></li> </ul>methods: {clickfun(e ...
一个元素位于另一个元素之上，点击上面的元素引发下面元素事件操作
一个元素位于另一个元素之上,点击上面的元素引发下面元素事件操作 <body><!-- 想要点击'上面盒子内 ...
【转载】Vue -- 获取点击元素的兄弟元素
转载自 https://blog.csdn.net/Lhy_JL/article/details/109130561 一.首先 //首先是获取当前点击事件//view绑定并传递 $event<s ...

html点击除某个元素之外的元素的事件添加技巧

html点击除某个元素之外的元素的事件添加技巧相关推荐

最新文章

热门文章