js点击某个DIV之外的任意位置来触发事件的方法
墨初 前端设计 8727阅读
在前端html页面的某些效果中，有时需要点击网页中的任意位置来触发某些事件，下面就给出一个示例来讲解一下。
js点击任意位置来隐藏元素
鼠标点击网页的任意位置(除去要被操作的元素外)，来隐藏元素，这里需要的是对js的冒泡事件进行操作！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞鸟慕鱼博客</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div style="width: 400px;height: 200px;background-color: #ccc;">
我是要操作的元素，点击我不会消失，但是点击网页的其它位置我会消失的！
</div>
<script>
$(document).click(function () {
$(".hide_div").hide();
});
//阻止当前元素的任何事件
$(".hide_div").on("click", function (event) {
//兼容任何浏览器
var e = arguments.callee.caller.arguments[0] || event;
if (e && e.stopPropagation) {
// 兼容 Mozilla and Opera 浏览器
e.stopPropagation();
} else if (window.event) {
// 兼容IE浏览器
window.event.cancelBubble = true;
}
});
</script>
</body>
</html>
代码详解：
1、点击网页中的任意位置来触发元素的隐藏事件
2、点击被事件操作的元素时，阻止document的冒泡事件。
3、记得加载挂载jquery.js文件
js冒泡事件介绍
在一个对象上触发某类事件（比如onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象！
具体介绍可以参考此篇文章：https://www.feiniaomy.com/post/34.html
