关于自定义select打开后点击页面其他地方关闭的一些总结

1.第一版,只有点击打开按钮才能关闭

这个就没什么好说的,点击按钮,做对应操作,贼简单,不过体验也同样贼差。

点开选择框之后只有点击打开选择框的按钮才能关闭。

2.第二版,在选择框后,其他元素之前加上一个蒙版

蒙版加上之后,可以是透明的,也可以是半透明的,不过一个选择框加个半透明的蒙版有点不伦不类。

这样基本的点击其他位置关闭选择框的功能是实现了,但是有个致命的缺点,就是你点击其他地方是没有效果的。

因为你第一次点击的是蒙版,所以其他地方并没有背点击,体验感很差。

3.第三版,加全局点击事件

这个方法基本就可以实现了点击按钮打开选择框,点击其他位置关闭选择框,呃,来看看代码:

this.showList = !this.showList;
if(this.showList){
    var _this = this;
    setTimeout(function () {
        var windowClick = window.onclick;
        window.onclick = function(e){
            _this.showList = false;
            if(windowClick){
                windowClick(e);
            }
            window.onclick = windowClick;
        };
    },0);
}

在选择框打开的时候顺便给一个一次性的window.click事件下次不管点击哪里都会触发,然后关闭选择框。

但是这样写也会有一些问题,就是在一些阻止冒泡的dom上边触发click事件的时候,并不会关闭选择框。

4.第四版,打开选择框的元素触发blur事件

blur事件是一部分元素的事件,所以需要在点击打开选择框的元素上添加一个属性:tabindex="-1"。

普通元素加上tabindex属性之后就可以拥有focus和blur事件,这样就可以完美实现点击其他位置关闭选择框的目的了。

给值-1是因为防止按tab键选中这个元素,当然也可以给正值,这个属性的值代表的是按tab键选中此元素的顺序,感觉和z-index理解差不多数字越小越靠前选中(0除外,0是最后一个被选中,但是也有focus和blur事件)。

最后附上测试的代码:

<div class="vueApp">
        <div tabindex="2" @focus="console(‘div tabindex=“2” focus‘)" @blur="console(‘div tabindex=“2” blur‘)">tabindex="2"</div>
        <el-input @focus="console(‘input focus‘)" v-model="input"></el-input>
        <div tabindex="-1" @focus="console(‘div tabindex=“-1”  focus‘)" @blur="console(‘div tabindex=“-1”  blur‘)">tabindex="-1"</div>
        <div @focus="console(‘div not tabindex  focus‘)" @blur="console(‘div not tabindex blur‘)">not tabindex</div>
        <div tabindex="1" @focus="console(‘div tabindex=“1” focus‘)" @blur="console(‘div tabindex=“1” blur‘)">tabindex="1"</div>
        <div tabindex="1" @focus="console(‘div tabindex=“1” focus‘)" @blur="console(‘div tabindex=“1” blur‘)">tabindex="1"</div>
        <div tabindex="0" @focus="console(‘div tabindex=“0” focus‘)" @blur="console(‘div tabindex=“0” blur‘)">tabindex="0"</div>
    </div>
new Vue({
        el:".vueApp",
        data:{
            input:"13212"
        },
        mounted:function(){},
        methods:{
            console:function (str) {
                console.log(str);
            }
        }
    })

原文地址:https://www.cnblogs.com/zchenguang/p/9930077.html

时间: 2024-10-16 08:05:39

关于自定义select打开后点击页面其他地方关闭的一些总结的相关文章

点击页面其他地方关闭弹出层

html: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #div { background: red; width: 100px; height: 100px; display: none; } </style> <script type="text/javascrip

jquery实现的点击页面其他地方隐藏显示的元素

jquery实现的点击页面其他地方隐藏显示的元素:在实际应用中,可能有这样的效果,那就是有这样一个弹出层,点击层本身的时候,这个层不会隐藏,而点击除去层之外的页面其他地方则会将这个层隐藏,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

点击页面其它地方隐藏该div的方法

思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else

点击页面其它地方隐藏该div的两种思路

第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. $(document).bind('click',function(){ $('#test').css('display','none'); }); $('#test').bind('click',function(e){ stopPropagati

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

点击页面其他地方的时候,让弹出框消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

点击页面其它地方隐藏某个div的两种思路

思路一             第一种思路分两步     第1步:对document的click事件绑定事件处理程序,使其隐藏该div     第2步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div $(document).bind('click',function(){    $('#test').hide();}); $('#test').bind('click',function(e){    

单击页面任何地方关闭隐藏层

单击页面任何地方关闭隐藏层的一种新的实现方法,有需要得朋友可以参考对比一下,可以自己在此基础上扩展相关功能.(也可以在框架页中绑定单击事件,自己加一下即可.) <!doctype html> <html> <head> <meta charset="utf-8"> <title>单击页面任何地方关闭隐藏层</title> <script type="text/javascript">