表情层弹出后，点击之外区域层消失

标题描述不清，是要实现这样一个功能。相信大家都玩过新浪微博，在发微博时，你可以选择添加表情，如下图，点击红框内的区域，表情层不消失，而点击之外区域，表情层消失。

实现的方法很多，我暂且想到三种：

1. 检测鼠标的位置是不是红框区域内，第一次做这样功能时就采用这种方法，笨了点
2. 根据点击元素的target.id作判断，不过当层的内容为动态获取时，不可取
3. 为红色div层添加click事件，事件内阻止冒泡，document中的click就不会执行，这个方法最简洁

下面是方法3的部分代码，html代码：

<p><button id="btnPop" type="button" onclick="return showPopup();">弹出div层</button></p>
<div id="popup" class="popup">
    <ul>
        <li><span>css</span></li>
        <li><span>html</span></li>
        <li><span>js</span></li>
        <li><span>csharp</span></li>
        <li><span>sql</span></li>
    </ul>
</div>

js代码：

document.getElementById("popup").onclick = function(e){
    e = e || window.event;
    if(window.event){
        e.cancelBubble = true;
    } else {
        e.stopPropagation();
    }
};
document.body.onclick = function(e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.id === "btnPop") return;
    hidePopup();
};

 

demo演示：表情层弹出后，点击之外区域层消失

---end

作者：清流鱼

出处：http://www.cnblogs.com/qingliuyu/

新浪微博：http://weibo.com/qingliuyu

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。