模态框到阻止冒泡时间

最近在ele框架中看到el-dialog想到实现原来，这个el-dialog我理解的原理是，他存在于那个位置，用冒泡时间阻止在弹框内部随意点击的事件，

直接写个demo吧，估计能看懂就可以看懂，写的比较言简意赅

    <style>div{position: relative;}.box{position: absolute;margin: 0;padding: 0;display: none;}.box li{list-style: none;width: 100px;text-align: center;border: 1px solid #ccc;cursor: pointer;}</style><div><h3>里面有<span class="textCentent"></span></h3><button class="btn">点开</button><ul class="box"><li>电脑</li><li>手机</li><li>手表</li></ul></div>
复制代码

    var textContent = document.querySelector('.textCentent')var btn = document.querySelector('.btn')var box = document.querySelector('.box')var lis = document.querySelectorAll('.box li')btn.onclick = function(e){box.style.display = "block"e.stopPropagation()}lis.forEach(item => {item.onclick = function(e){textContent.innerHTML = item.innerHTMLe.stopPropagation()}})document.onclick = function(){box.style.display = "none"}
复制代码

顺便说下冒泡事件和阻止冒泡事件吧

docment的click事件在我看来是最底层的事件，刚刚又起来了一个demo，冒泡事件是一个上升的事件。在上升阶段按照页面铺的展开。

模态框到阻止冒泡时间相关推荐

详细介绍React模态框组件react-modal
1,介绍该组件实现了模态框的一些效果. 这是react-modal官网的配置参数. 模态框的手动实现,并不算太难,这个组件用着还不错. 2,配置参数介绍 import React, { Compon ...
Bootstrap学习之模态框（Modal）插件
Bootstrap每天必学之模态框(Modal)插件,模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互 ...
html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
分享一个旋钮插件 jquery.knob.js 新增change事件中回调返回值功能以及阻止冒泡事件
本来都要休息了还是打开github,解决了线上一个插件的兼容性. 看来今晚能睡的比较踏实了! 插件介绍 jquery-knob是我用到的UI设计比较清新的旋钮插件之一,应用灵活,体积小,功能强大. 图 ...
重新认识vue之事件阻止冒泡
冒泡的表现近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
js实现模态框点击空白关闭
面试的时候被问到了,这个问题我在网上一直没搜索到.不过bootstrap已经实现了. 在学习js事件委托的时候.想到可以解决这个问题. 在document添加点击监听,利用事件的捕获和冒泡,界面上的点 ...
自动关闭模态框_Dialog 弹出框
介绍弹出模态框,常用于消息提示.消息确认,或在当前页面内完成特定的交互操作. 弹出框组件支持函数调用和组件调用两种方式. 函数调用 Dialog 是一个函数,调用后会直接在页面中弹出相应的模态框. ...
SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充
场景实现 Html代码 <div th:fragment="content"><div class="ibox float-e-margins&quo ...

模态框到阻止冒泡时间

最近在ele框架中看到el-dialog想到实现原来，这个el-dialog我理解的原理是，他存在于那个位置，用冒泡时间阻止在弹框内部随意点击的事件，

直接写个demo吧，估计能看懂就可以看懂，写的比较言简意赅

顺便说下冒泡事件和阻止冒泡事件吧

docment的click事件在我看来是最底层的事件，刚刚又起来了一个demo，冒泡事件是一个上升的事件。在上升阶段按照页面铺的展开。

模态框到阻止冒泡时间相关推荐

最新文章

热门文章