鼠标点击div区域之外的地方后隐藏div(转)

时间:2024-03-10 13:57:01

用div做了一个code选择器,但div打开之后我想实现点击其他区域就可以自动隐藏的效果,最后解决方法:

第一步:在js中定义一个变量用来保存鼠标是否在div中这个状态:var isOut=true;(默认不再区域中)

第二步:在div中加上onmouseover和onmouseout事件,用来控制变量isOut:

<div id="codediv" onmouseover="isOut=false" onmouseoout="isOut=true"/>

第三步:在显示div的事件中加入取消事件冒泡的语句:(因为这个事件也会触发document.onmousedown)

event.cancelBubble=true;

第四步:为document添加onmousedown事件:

document.onmousedown=function(){

   var codediv=document.getElementById("codediv");

   if(codediv.style.display!="none" && isOut){

      codediv.style.display!="none";

   }

}

 

备注:document .onclick事件也行,但要保证页面中其他控件没有用到这个事件,不然可能会发生冲突。