jquery 点击其他地方
<script type="text/javascript">
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();//停止冒泡 非ie
else
e.cancelBubble = true;//停止冒泡 ie
}
$(document).bind('click',function(){
$('#test').css('display','none');
});
$('#test').bind('click',function(e){
//写要执行的内容....吥啦不啦
stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
});
</script>
事情是这样的,比如我点击一个div显示出一个菜单,当点击其他地方,菜单消失,其中一个思路就是给document绑定上click事件,如果是点击div就显示菜单,如果是点击document就隐藏菜单,但是如果点击div也等于是点击了document,所以在点击div的事件里面执行完要执行的语句,然后终止js的冒泡,否则会既执行了div的点击事件,又继续冒泡到document事件上,执行了document的click的内容
我的意思就是div也属于document,所以点击div也是点击了document,所以在不进行任何限制的情况下,点击div的时候,div和document的方法都会执行,进行限制的具体内容就是在点击div的方法里面停止冒泡,具体方法就是用e.stopPropagation()→"适用于非ie"方法,如果是ie就是e.cancelBubble=true
还有一种思路就是 在document的click方法中判断触发的源是哪一个,如果是div的话就不执行任何操作也就是return,如果不是div的话,那就将菜单隐藏具体如下
event对象包含了一个重要属性:target(W3C)/srcElement(IE),这个属性标识了触发事件的原始元素,思路二就是要利用这个属性。我们可以直接对document的click事件绑定事件处理程序,在事件处理程序中判读事件源是否为id==test的div元素或其子元素,如果是则方法return不做操作,如果不是则隐藏该div。
$(document).bind('click',function(e){
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && elem.id=='test') {
return;
}
elem = elem.parentNode;
}
$('#test').css('display','none'); //点击的不是div或其子元素
});
jquery 点击其他地方的更多相关文章
- jquery点击其他地方隐藏div层的实现程序
js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...
- Jquery手机点击其他地方隐藏控件问题
因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...
- 点击其它地方关闭DIV
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS/jQuery点击某元素之外触发事件
JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...
- jquery点击复选框触发事件给input赋值
体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...
- artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jquery点击改变图片src源码并toggle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
随机推荐
- java根据url获取完整域名
private String getDomain(String destination){ if(destination==null||destination.trim().equals(" ...
- 浩爷AC自己主动机高速学习方案
今天弄完自己主动机之后.从那天比赛的阴影中爬出来了,猛地一看真不咋滴难,细致一看这尼玛还不如猛的一看. .. 必备算法:KMP,字典树(KMP我写了,字典树太简单,就是一个思想.我能够 ...
- 开源企业IM-免费企业即时通讯-ENTBOOST V2014.177 Windows版本号正式公布
ENTBOOST,VERSION 2014.177 LINUX 版本号公布.主要添加Android安卓手机开发接口.企业IM接口,JQUERY开发接口,PCclient部分BUG修正: 下版本号更新时 ...
- Want to archive tables? Use Percona Toolkit’s pt-archiver--转载
原文地址:https://www.percona.com/blog/2013/08/12/want-to-archive-tables-use-pt-archiver/ Percona Toolkit ...
- 1.4 Python基础知识 - 代码书写格式及条件判断"if ... else ..."
一.代码的书写规则 在所有的开发语言中,代码之间都是有关联的关系,有的是包含关系,有的是上下级关系,有的是代表语句的结束.在python中也是有相应的规则的: 1.在没有上下级关系的代码中,代码要顶行 ...
- jquery 获取上一个兄弟元素和下一个兄弟元素
jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll(),返回所有之前的兄弟节点 jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点 jQu ...
- Day1:字符编码
一.ASCII码 ASCII(American Standard Code for Information Interchange,美国标准信息交换代码),8位,一个字节,最多只能表示255个符号. ...
- Surging 微服务框架使用入门
原文:Surging 微服务框架使用入门 前言 本文非 Surging 官方教程,只是自己学习的总结.如有哪里不对,还望指正. 我对 surging 的看法 我目前所在的公司采用架构就是类似与Sur ...
- 洛谷—— P1091 合唱队形
https://www.luogu.org/problem/show?pid=1091#sub || http://codevs.cn/problem/1058/ 题目描述 N位同学站成一排,音乐 ...
- 错误代码: 1449 The user specified as a definer ('root'@'%') does not exist
1. 错误描写叙述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:call analyse_use('20150501','201506 ...