javascript:点击下面的按钮出现提示框，点击其他地方提示框消失

还有一种解法，还是无法输出，也麻烦大神帮忙看一下究竟哪里出错了？
javascript代码：var $ = function(i) {
        return document.getElementByIdx_x_x_x(i)
    };
    function moreshow() {
        var e = $('pkCityBx');
        if (e.style.display != 'block') {
            e.style.display = 'block';
        } else {
            e.style.display = 'none';
        }
    };

    function moreddhide(e) {
        if (!e) var e = window.event; // 如果e未定义，说明当前是IE浏览器 ,设置 e=window.event,其它浏览器中e就是event，所以不做处理
        if (e.srcElement) {
            var a = e.srcElement.getAttribute("id")  //ie support e.srcElement , e.sreElement指向触发事件的元素
        } else {
            var a = e.target.getAttribute("id") //ff support e.target
        }
            //alert(a);
        if (a != 'pkCity_Show') {
            $('pkCityBx').style.display = 'none';
        }
    };
    document.onclick = moreddhide;e||window.event注释：    参数为e||window.event  表示e或window.event  这句话是跨浏览器的写法
    IE中该对象为window.event(window可省略)  而Firefox中该对象为e
    至于该对象是什么：
    该对象代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等  例如：获取光标位置 event.clientX event.clientY   css样式：*{ margin:0; padding:0; line-height:none; border:none;}
body{ font-size:12px; padding:200px;}
a{ text-decoration:none;}
.wrap{ position:relative; width:150px; height:26px;}
.btn_click{ display:block; width:146px; height:22px; line-height:22px; text-align:center; color:#4ccb00; border:2px solid #4ccb00; border-radius:8px;}
.box_tips{ position:absolute; left:0; bottom:30px;}
.tips{ width:148px; text-align:center; color:#4ccb00; padding:80px 0px; border:1px solid #4ccb00}
.arrow{ text-align:center; color:#4ccb00;}html代码：<div class="wrap">
  <div id="pkCityBx" class="box_tips" style="display:none">
    <p class="tips">提示框</p>
    <p class="arrow">▼</p>
  </div>
  <a href="#" class="btn_click" id="pkCity_Show" onclick="moreshow();">点击</a>
</div>

demo here<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        #msg{width:180px;border:1px solid #009933;height:150px;display:none;background:#ffffff;position:absolute;}
        #btn{width:182px;height:35px;line-height:35px;background:#009933;position:absolute;top:350px;left:300px;}
    </style>
</head>
<body>
<div id="msg">1</div>
<div id="btn">2</div>
<script type="text/javascript">
    document.onclick = function (e) {
        e = e || event;
        var btn = document.getElementById("btn");
        var msg = document.getElementById("msg");
        var target = e.target || e.srcElement;
        if (target !== btn && target !== msg) {
            msg.style.display = "none";
        } else {
            msg.style.top = (btn.offsetTop - 160) + "px";
            msg.style.left = btn.offsetLeft + "px";
            msg.style.display = "block";
        }
    }
</script>
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" type="text/javascript">
// 工具类
var EventUtil = {
/**
* 添加事件
* @param oTarget: DOM对象
* @param sEventType:事件类型
* @param fn:函数名
*/
addEvent : function(oTarget,sEventType,fn){
if(oTarget.addEventListener){
this.addEvent = function(oTarget,sEventType,fn) {
oTarget.addEventListener(sEventType,fn,false);
}
}else if(oTarget.attachEvent){
this.addEvent = function(oTarget,sEventType,fn) {
oTarget.attachEvent("on" + sEventType,fn);
}
}else{
this.addEvent = function(oTarget,sEventType,fn) {
oTarget["on" + sEventType] = fn;
}
}
// 调用新函数
this.addEvent(oTarget,sEventType,fn);
} /**
* 移除事件
* @param oTarget: DOM对象
* @param sEventType:事件类型
* @param fn:函数名,如果DOM对象上有多个click事件的话,可以指定移除哪一个函数
*/
,removeEvent : function(oTarget,sEventType,fn){
if(oTarget.removeEventListener){
this.removeEvent = function(oTarget,sEventType,fn) {
oTarget.removeEventListener(sEventType,fn,false);
}
}else if(oTarget.detachEvent){
this.removeEvent = function(oTarget,sEventType,fn) {
oTarget.detachEvent("on"+sEventType,fn);
}
}else {
this.removeEvent = function(oTarget,sEventType,fn) {
oTarget["on"+sEventType] = null;
}
}

this.removeEvent(oTarget,sEventType,fn);
}
/**
* 格式化事件对象,做到IE与DOM的统一
* @param oEvent:事件对象
*/
,formatEvent : function(oEvent){
if(!+[1,]){ // IE
oEvent.charCode = (oEvent.type == "keypress")?oEvent.charCode:0;
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charCode > 0);
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
// 阻止某个事件的默认行为
oEvent.preventDefault = function(){
this.returnValue = false;
}

if(oEvent.type == "mouseout"){
oEvent.relateTarget = oEvent.toElement;
} else if(oEvent.type == "mouseover"){
oEvent.relateTarget = oEvent.fromElement;
}

// 阻止冒泡
oEvent.stopPropagation = function(){
this.cancelBubble = true;
}

oEvent.target = oEvent.srcElement;
oEvent.timestamp = (new Date()).getTime();
}
return oEvent;
}
/**
* 格式化事件对象
*/
,getEvent : function(){
if(window.event){
return this.formatEvent(window.event);
}else {
return this.getEvent.caller.arguments[0];
}
}
/**
* 点击div之外任何地方，隐藏div
* @param showDom 点击showDom显示targtDom,点击页面其它地方隐藏targetDom
* @param targetDom 目标元素
*/
,registClickOtherHide:function(showDom,targetDom) {
var self = this;
this.addEvent(document,'click',function(){
var e = self.getEvent();
    var elem = e.target
    while (elem) {
        if (elem != document) {
            if (elem === targetDom || elem === showDom) {
                targetDom.style.display = "block";
                return;
            }
            elem = elem.parentNode;
        } else {
            targetDom.style.display = "none";
            return;
        }
    }

})
}
};
function showDiv() {
document.getElementById('d').style.display = "block";
}window.onload = function(){
// 注册事件
EventUtil.registClickOtherHide(document.getElementById('btnShow'),document.getElementById('d'));
}
</script>
</head><body>  <button id="btnShow" onclick="showDiv();">showDiv</button>
<div id="d" style="width: 100px;height: 100px;background-color: red;">
<div style="width:50px;height: 50px;background-color: blue;"></div>
</body>
</html>

用三楼的代码修改下即可,更好红色部分的ID
function moreshow(){
//...
}window.onload = function(){
// 注册事件
EventUtil.registClickOtherHide(document.getElementById('pkCity_Show'),document.getElementById('pkCityBx'));
}

用三楼的代码修改下即可,更好红色部分的ID
function moreshow(){
//...
}window.onload = function(){
// 注册事件
EventUtil.registClickOtherHide(document.getElementById('pkCity_Show'),document.getElementById('pkCityBx'));
}有点看不懂呵，是新添加了一行吗？

谢谢大神，请问下您知道怎么让鼠标发生变化吗？点击的时候鼠标变成手的形状
这个你完全可以百度的到的，在css里边加一句：cursor:pointer;

调试易

javascript:点击下面的按钮出现提示框，点击其他地方提示框消失

解决方案 »