js点击页面其它地方将某个显示的DIV隐藏

JavaScript026

js点击页面其它地方将某个显示的DIV隐藏,第1张

实现也很简单，但需要注意的是，在点击显示的事件中，需要做阻止事件冒泡的处理，否则就触发页面的点击事件了。但这样做也有一个缺点，即如果同一个页面中如果也有事件阻止冒泡，则不能隐藏DIV，所以在这样的事件中需要特殊处理下：自己调用隐藏下DIV（但正常来说这样的事件并不多）；

JS:

复制代码

代码如下:

$(document).ready(function()

{

//语言头部的点击事件，显示语言列表

$(".language_selected").click(function(e)

{

$(".language_list").toggle()

e.stopPropagation()

//阻止事件冒泡，否则事件会冒泡到下面的文档点击事件

})

//点击文档时，隐藏语言列表

$(document).click(function()

{

$(".language_list").hide()

})

//点击语言列表中的语言项时，更新选中项，并隐藏语言列表

$(".language_list

li").click(function()

{

$(".language_selected").text($(this).text())

$(".language_list").hide()

})

$("#noPopEvent").click(function(e)

{

e.stopPropagation()

})

})

CSS:

复制代码

代码如下:

.language_selected

{

cursor:

pointer

}

.language_list

{

border:

1px

solid

black

display:

none

}

.language_list

li

{

cursor:

pointer

border:

1px

solid

red

}

HTML:

复制代码

代码如下:

<div

style="width:

200px">

<div

class="language_selected">

中文(简体)</div>

<div

class="language_list">

<ul>

<li>中文(简体)</li>

<li>English</li>

</ul>

</div>

</div>

<div

id="noPopEvent"

style="width:

100px

height:

100px

border:

1px

solid

black">

点击我，不隐藏语言列表,需要自己显示DIV

</div>

知道文本框都有blur事件吗？就是光标在闪的时候就处于焦点，当你点其他地方时，光标就没了，就会触发blur事件。你要做到当div显示时，让隐藏在div内的文本框处于焦点，点击其他地方时，文本框的焦点自然会消失，blur事件把当前div隐藏。

!!注意: 当点击显示的div时要用脚本处理div中的隐藏文本框处于焦点

可以用jquery 脚本框架，方便，浏览器的兼容性好

var 按钮=document...\x0d\x0avar div=document....\x0d\x0a\x0d\x0a//点击按钮弹出div 在点击按钮关闭该div \x0d\x0a按钮.onclick=function()\x0d\x0a{\x0d\x0aif(div.style.display=="none")\x0d\x0a{\x0d\x0adiv.style.display="block"\x0d\x0a}\x0d\x0aelse\x0d\x0a{\x0d\x0adiv.style.display="none"\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a//点击其他地方关闭div\x0d\x0adocument.onclick=function()\x0d\x0a{\x0d\x0adiv.style.display="none"\x0d\x0a}\x0d\x0a\x0d\x0a//为了防止点击div 也关闭div 所以这里要防止冒泡\x0d\x0adiv.onclick=function()\x0d\x0a{\x0d\x0areturn false\x0d\x0a}\x0d\x0a\x0d\x0a希望对你有所帮助