jQuery实现点击一个div打开图层 点击其他div关闭图层实例分析(防止冒泡)

本文的例子告诉jQuery如何通过单击一个div打开图层，并通过单击其他div关闭图层。分享给大家参考，如下：

其实我很早就学习了js的一些高级知识，但是我用的不多，所以就渐渐忘记了。最近发现，随着编程的发展，你不得不使用它们，比如事件的冒泡。

需求如下：

单击class='click '块弹出class='pop '块单击class='page '块关闭class='pop '块单击class='pop '块不关闭任何块

如果你鲁莽地使用jQuery，直接程序就会被编写出来

script $(function(){ $(')。单击“)”。单击(functon(){ $(')。pop’)。show()；});$('.第')页。单击(function(){ $(')。pop’)。hide()；})})/脚本当你这么吵的时候，问题就出来了。当我点击‘点击’块时，该死的，我没有看到弹出层‘弹出’，它瞬间关闭了。为什么呢？因为当你点击“点击”时，会触发两个事件。第一个是您自己的click事件，由于您的父层也注册了click事件，因此第二个父层的click事件也会被触发，这称为事件冒泡。

我想保留这两个事件，但我不想出现这样的情况。我该怎么办？这就是我想说的防止事件冒泡。

防止事故冒泡大致有两种方法：

1)使用返回假；2)使用event . stopperpagation()；

事实上，两者的原理是相似的，即屏蔽物体以产生气泡

$(function(){ $(')。单击“)”。单击(functon(event){ $(')。pop’)。show()；event . stopperpagation()；});$('.第')页。单击(function(){ $(')。pop’)。hide()；})})或：

$(function(){ $(')。单击“)”。单击(functon(){ $(')。pop’)。show()；返回false});$('.第')页。单击(function(){ $(')。pop’)。hide()；})})更多对jQuery感兴趣的读者，请查看本站话题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》。

希望本文对大家的jQuery程序设计有所帮助。