当前位置：首页 > 资讯 > 技术文档

jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)

时间：2020-05-04 04:24 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)

本文实例讲述了jQuery实现点击某个div打开层，点击其他div关闭层的方法。分享给大家供大家参考，具体如下：其实很早就学过js一些高级部分的知识，但是用的不多，也就慢慢淡忘了。最近发现随着编程的深入，你不得不用到它们，比如事件的冒泡。 [img]http://files.jb51.net/file_images/article/201611/20161118112204514.png?20161018113338[/img] 有一需求如下： ①点击class = "click" 块弹出 class="pop" 块 ②点击class = "page" 块关闭 class="pop" 块 ③点击class = "pop" 块不关闭任何块如果用jQuery 鲁莽一点，直接的程序就写出来了

<script>
 $(function(){
   $('.click').click(functon(){
     $('.pop').show();
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
 })
</script>

你这么一闹腾，问题就出来了，当我点击"click"块的时候，妹的，我还没看到弹出层 "pop",瞬间就关闭了，这是为什么呢？因为你点击"click" 的瞬间，触发了两个事件，第一个是自己本身的点击事件，因为自己的父层也注册了点击事件，那第二个父层的点击事件也被触发了，即所谓的事件冒泡。我又想保留这两个事件，但又不想出现这样的情况，怎么办，这就是我要说的阻止事件冒泡。阻止事件冒泡大致有两种办法： 1）使用[b]return false; [/b]2）使用 [b]event.stopPropagation();[/b] 其实两者的原理差不多，就是屏蔽要冒泡的对象

$(function(){
   $('.click').click(functon(event){
     $('.pop').show();
     event.stopPropagation();
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
})

或者：

$(function(){
   $('.click').click(functon(){
     $('.pop').show();
     return false;
   });
   $('.page').click(function(){
    $('.pop').hide();
  })
})

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/877.htm]jQuery窗口操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/497.htm]jQuery拖拽特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》、《[url=http://www.1sucai.cn/Special/93.htm]jquery中Ajax用法总结[/url]》、《[url=http://www.1sucai.cn/Special/539.htm]jQuery表格(table)操作技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》及《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》希望本文所述对大家jQuery程序设计有所帮助。

全部评论(0)

上一篇：关于juqery radio写法的兼容性问题(新老版本jquery)
下一篇：jquery缓动swing liner控制动画过程不同时刻的速度

资讯排行榜
更多>>