首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS的事件冒泡和捕获

事件机制 ---- 事件触发三个阶段: window往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播,遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例:如果给body中的子节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行。...// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event => { console.log('冒泡') }, false)node.addEventListener...此时进入冒泡阶段,inner上的时间处理器得到执行 事件命中元素后开始向上冒泡,一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。...我们把时间注册在冒泡阶段(addEventListener的useCapture选项为false) var selector = document.querySelector.bind(document

2.5K20

JS防止站点被恶意保存

很多同学网站都在用静态博客,安全轻量的同时也带来了些许麻烦,正如首图中那样,站点被别人全盘撸走,反而比自己文章关键字还高.自己辛辛苦苦的耕耘变成了别人的果实…所以本文提供一下通过JS手段防止网站被扒皮的手段...进入正题: 因为站点是纯静态的,所以没办法防止网页被扒走,但是我们可以让他扒走的网页 用不了… 对静态资源设置防盗链,判断可信域名…不过很多同学都放在 coding/github 之类的 没有这种功能的托管商...= top){ location.href="https://huai.pub"; } //防止被嵌套....let whitelist=['huai.pub','127.0.0.1','localhost','']; //host白名单;空的话,为以file类型打开,是为了防止保存到本地调试,如果不担心此条...把上面部分放到一个不得不运行且打开页面就运行的JS里面(不建议放到公共资源部分,比如 jQuery之类的 )…当然 需要按照注释修改为自己的参数; 之后将这条JS 加密 然后将第二部分放到页面底部的JS

3.8K20

JS事件,你真的懂吗(捕获,冒泡)?

说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...最后是outer冒泡阶段 由此我们可以看到,事件触发的时候实际上都是有捕获和冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止,那么冒泡阶段反之,会从最内层触发的那个元素开始往外层的父级元素一直冒泡...并且事件的触发是先捕获,在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件的冒泡呢,这个时候就会用到一个方法。...e.stopPropagation(); 当我们吧这个方法放到inner冒泡阶段的下面的时候,神奇的事情发生了,当代码执行到这里,默认直接把冒泡的事件给阻止了,这时候会呈现出这个样子。...这样就成功的阻止了事件的冒泡,是不是很神奇,那么我们阻止事件冒泡还有别的方法吗,答案是肯定的,这时候就得了解一下我们的event对象了,我们打印一下event对象,如下: 打印发现当我们触发事件时,

2.2K20

JS事件流、事件冒泡、阻止冒泡、事件捕获(一看就懂)

讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流,这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始,最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是: 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾,就可以做到阻止冒泡事件。...2、JQ阻止事件冒泡 jq阻止事件冒泡就简单了,直接在事件函数里面添加 return false; 就行了。

10.2K53

vue.js中实现阻止事件冒泡

当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods:{ _stopPropagation

5.9K10

js节流函数和js防止重复提交的N种方法

应用情景 经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等; 还比如:手抖、手误、服务器没有响应之前的重复点击; 这些都是没有意义的,重复的无效的操作...同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现。 方法汇总 本文整理了我在工作实践当中,觉的防止js重复提交,比较好用的方法,在这里和大家分享一下。...一、setTimeout + clearTimeout(节流函数)   本文提供两种实现方式:普通节流函数和闭包节流函数 二、设定flag/js加锁 三、通过disable 四、添加浮层比如loading...图层防止多次点击 具体实现 一、setTimeout + clearTimeout(节流函数) 方式一:闭包节流函数(可传递多个参数) /** * 闭包节流函数方法(可传参数) * @param Function...二、设定flag/js加锁 var lock = false; jQuery("#submit").on('click', function () { if (lock) { return

8.4K40
领券