JavaScript 模态框 (阻止事件冒泡,event.target)

最新推荐文章于 2024-04-14 22:38:53 发布
最新推荐文章于 2024-04-14 22:38:53 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79594703
版权


demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
    <script>
        //需求：点击登录按钮，显示模态框。点击出去login以外的所有盒子隐藏模态框。
        //步骤：
        //1.给登录绑定事件
        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框


        //1.给登录绑定事件
        var mask = document.getElementsByClassName("mask")[0];
        var a = document.getElementsByTagName("a")[1];

        a.onclick = function (event) {
            //显示模态框
            mask.style.display = "block";

            //阻止事件冒泡
            event = event || window.event;
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }

        }

        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框
        document.onclick = function (event) {
            //获取点击按钮后传递过来的值。
            event = event || window.event;

            //获取触发事件的最子集元素     兼容写法
            //var aaa = event.target || event.srcElement;
            var aaa = event.target?event.target:event.srcElement; //获取触发事件的最子集元素   兼容写法

            console.log(event.target);

            //判断目标值的ID是否等于login，如果等于不隐藏盒子，否则隐藏盒子。
            if(aaa.id !== "login"){
                mask.style.display = "none";
            }
        }

    </script>

</body>
</html>


houyanhua1
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery阻止事件冒泡
11-25
jquery阻止事件冒泡jquery阻止事件冒泡jquery阻止事件冒泡
input focus 事件阻止事件冒泡
weixin_42284453的博客
06-03 1947
将 @focus 改为 @click.stop.native
xss攻击原理与解决方法
最新发布
套路猿的博客
04-14 7万+
概述XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器执行，达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨大的，是web安全的头号大敌。攻击的条件实施
vue 阻止输入框冒泡
沙鑫741的博客
11-12 2962
阻止vue的输入框冒泡 vue 阻止事件方法 .stop .prevent .capture .self .once &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;div id="app"&gt; {{ message }} &lt;d...
flutter -各类自定义弹窗(图片预览，输入框，键盘)以及如何阻止事件冒泡
Emperor灬fly的博客
07-27 1714
       开局废话：由于公司app后期需要做混合开发，又担心h5的性能问题。于是迫不得已，只能两端齐搞，验证一些性能优化的问题。打开了一年前flutter正式发布时，蹭热度创建的现已布满藤蔓的仓库，微微颤抖的双手，开始敲击键盘。        先说下普通的自定义弹窗吧，鉴于弹窗一般只起一些提示，跟选择功能，所以没必要去单独注册路由，继承showDialog父类就可以
js阻止冒泡事件
12-06
js阻止冒泡事件的方法有2种。 事件冒泡：当一个元素上的事件被触发时，同样的事件会在那个元素的所有祖先元素中被触发。 这个事件是从原始元素开始一直冒泡到DOM树最上层。 目标元素：任何一个事件的目标元素最开始的那个元素，并且它在我们的元素对象中以属性的形式出现。使用事件代理可以把事件处理器添加到一个元素上，等待一个事件从它的自己元素冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。 方法： 直接在事件调用的函数末尾添加return false; 2.event.stopPropagation()写在事件函数的开始。
event.currentTarget与event.target的区别介绍
09-05
在JavaScript的事件处理中，`event.currentTarget` 和 `event.target` 是两个非常重要的属性，它们在处理DOM元素上的事件时起到关键作用。本文将详细解释这两个属性的区别，并通过实际的测试代码来帮助理解。 首先...
Javascript 阻止javascript事件冒泡，获取控件ID值
10-29
`event.target.id`同样可以获取触发事件的元素ID。 除了上述方法，还可以通过DOM遍历来获取事件源元素的ID，但这种方法通常不如直接使用`event.target`或`event.srcElement`高效。 在实际应用中，结合事件冒泡和...
jquery 关于event.target使用的几点说明介绍
10-27
在JavaScript和jQuery中，`event.target` 是一个非常重要的属性，尤其在处理事件时。它表示触发事件的实际DOM元素，即使事件冒泡到其他父元素，`event.target`始终指向最初的源头。这篇文竛建议我们理解并正确使用`...
js事件冒泡及其阻止方法
01-08
例如，如果每个`.child`元素都有一个`data-id`属性，可以通过`event.target.getAttribute('data-id')`获取到触发事件的子元素的标识。 在事件委托的示例中，所有的点击事件都被绑定到`.par`元素上，而不是每个`....
JavaScript 事件冒泡简介及应用
12-10
为了更好地控制事件冒泡，开发者可以使用`event.stopPropagation()`方法来阻止事件继续向上冒泡，或者使用`event.stopImmediatePropagation()`防止其他在同一元素上注册的事件处理程序被执行。这些技巧在处理复杂...
JS弹出新窗口被拦截的解决方法
10-21
使用js使用新窗口打开页面的时候，经常遇到被浏览器拦截的情况，怎么解决呢？下面小编通过两种情况分析并分别附有解决办法，对js弹出新窗口被拦截感兴趣的朋友一起学习吧
事件冒泡。阻止事件冒泡 |阻止元素的默认行为
Fanbin168的专栏
04-12 2951
如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出 现冒泡问题。  触发的顺序是从小范围到大范围。 这就是所谓的冒泡现象，一层一层往上。 div#a { width: 500px; height: 500px; background-c
ExtJs实现阻止冒泡，以及再次允许冒泡——stopPropagation的正确使用
weixin_30251829的博客
12-08 273
需求如下： ↑ 图一：这是正常状态 ↑ 图二：这是hover效果 ↑ 图三：这是点击编辑按钮之后的状态 注：页面中是3个Panel ，每个Panel都绑定了点击事件。“输入框0”这不是Label而是一个readOnly为false的TextField，点击编辑的时候TextField可以编辑。 那么问题来了，每次点击TextField的时候都会触发上...
阻止Bootstrap 模态框（Modal）点击空白处时关闭
weixin_30467087的博客
01-17 277
默认情况下点击空白处时会关闭模态框，添加data-backdrop="static"后可以阻止关闭 转载于:https://www.cnblogs.com/zoex/p/bootstrap-modal.html
小程序使用弹窗组件Modal，阻止冒泡事件
Coder_KellySha的博客
10-15 916
在modal组件上加一个catchtap事件（里面不写内容都可以），亲测有效！ <i-modal title="提示" visible="{{ visible }}" catchtap="stopPropagation" bind:ok="call" bind:cancel="handleClose" ok-text="是" cancel-text="否"> <vi...
vue 模态框场景 阻止事件冒泡
菜鸟吴de博客
11-15 465
vue 事件修饰符 阻止事件冒泡
绑定事件、阻止默认事件、阻止冒泡
道路是曲折的，前途是光明的
09-15 410
一、绑定事件 ie6-8 ：attachEvent (事件名，函数名)；事件名+on ie9以上也支持addEventListener标准下：addEventListener(事件名，函数名，false)；事件名无on，false表示冒泡阶段调用事件处理函数，true则是捕获阶段绑定事件的问题：1、参数不一样 2、是否加on 3、执行顺序

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值