鼠标点击空白处隐藏指定元素

原文出处http://www.cnblogs.com/enone/archive/2010/12/09/1901429.html

js代码：

var $ = function(i) {
    return document.getElementById(i)
};
function moreshow() {
    var e = $('pkCityBx');
    if (e.style.display != 'block') {
        e.style.display = 'block';
    } else {
        e.style.display = 'none';
    }
    return false
};
function moreddhide(e) {
    if (!e) var e = window.event;
    if (e.srcElement) {
        var a = e.srcElement.getAttribute("id")
    } else {
        var a = e.target.getAttribute("id")
    }
    if (a != "pkCity_Show") {
        $('pkCityBx').style.display = 'none'
    }
};
document.onclick = moreddhide;

 

HTML代码如下：

 

<a href="Javascript:void(0);" id="pkCity_Show" onclick="moreshow();">点击</a>
<div id="pkCityBx" style="display:none"> 内容文字... </div>

 

 

注：当在空白处点击鼠标时，将获得空白处所在元素的id，如果没有则为null。

（例：如果点击的空白处是<div id="face">xxxxxx</div>,则上面代码中的a = ‘face’）

srcElement是获得正在触发事件的元素，getAttribute是获得元素的某个属性，e.target貌似是为了兼容firefox。