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