lycorisradiata

点击空白关闭弹窗的推荐写法
便于用户操作体验,除了加一个关闭按钮外,一般还会加一个点击弹窗外的空白处也能关闭弹窗的操作。推荐写法 $(d...
扫描右侧二维码阅读全文
10
2018/04

点击空白关闭弹窗的推荐写法

便于用户操作体验,除了加一个关闭按钮外,一般还会加一个点击弹窗外的空白处也能关闭弹窗的操作。

推荐写法

    $(document).mouseup(function(e){  
           var _con = $(' 目标区域 ');   // 设置目标区域  
           if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1  
           some code...   // 功能代码  
           }  
    });  

原理:
判断点击事件发生在区域外的条件是:

  1. 点击事件的对象不是目标区域本身
  2. 事件对象同时也不是目标区域的子元素

普通写法

    $(document).mouseup(function(e){  
           var _con = $(' 目标区域 ');   // 设置目标区域  
           if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1  
           some code...   // 功能代码  
           }  
    }); 
    var 按钮=document...;  
    var div=document....;   
    //点击按钮弹出div 在点击按钮关闭该div   
    按钮.onclick=function()  {  
        if(div.style.display=="none")  {
     
            div.style.display="block";  
        } else  {  
            div.style.display="none";  
        }  
    }    
    //点击其他地方关闭div  
    document.onclick=function()  {
        div.style.display="none";  
    }     
    //为了防止点击div 也关闭div 所以这里要防止冒泡  
    div.onclick=function()  {
        return false;  
    }  
Last modification:December 11th, 2018 at 02:41 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment