js点击某个DIV之外的任意位置来触发事件的方法

2017-01-09 墨初前端设计 7610阅读

在前端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

标签：JS JavaScript javaScript教程 JS教程 HTML