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

做~自己de王妃 提交于 2020-01-02 18:23:09

 用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";

   }

}

OK。

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

2009-05-08

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!