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

js事件防止冒泡

事件目标 如今。事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,可是没有被全部浏览器实现 。...停止事件传播 事件对象还提供了一个.stopPropagation()方法,该方法能够全然阻止事件冒泡。...以便訪问事件对象。然后。通过简单地调用event.stopPropagation()就能够避免其它全部DOM元素响应这个事件。这样一来,单击button的事件会被button处理。...这样的行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时。会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。...事件传播和默认操作是相互独立的两套机制,在二者不论什么一方发生时,都能够终止还有一方。假设想要同一时候停止事件传播和默认操作,能够在事件处理程序中返回false。

2.4K40

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

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

10.1K53

JS事件冒泡和捕获

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

2.5K20

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

说到js事件大家肯定都知道,那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...true表示监听事件的捕获阶段,false表示监听事件冒泡阶段。 返回值 没有返回值 示例: <!...最后是outer冒泡阶段 由此我们可以看到,事件触发的时候实际上都是有捕获和冒泡阶段的,并且捕获阶段会从最外层的父级元素开始捕获,一直捕获到最后触发事件的那个元素点才会停止,那么冒泡阶段反之,会从最内层触发的那个元素开始往外层的父级元素一直冒泡...并且事件的触发是先捕获,在冒泡。 阻止事件冒泡 事件冒泡会让我们实现某些功能的时候产生阻碍,那么我们怎么怎么阻止事件冒泡呢,这个时候就会用到一个方法。...这样就成功的阻止了事件冒泡,是不是很神奇,那么我们阻止事件冒泡还有别的方法吗,答案是肯定的,这时候就得了解一下我们的event对象了,我们打印一下event对象,如下: 打印发现当我们触发事件时,

2.2K20

如何新窗口打开导航链接?

Hexo会主动在新窗口打开除主域名之外的链接,如果你博客绑定域名为fe32.top,超链接为其他域名(如fe34.top)时,点击该超链接会主动在新窗口打开。...解释如下: 这里虽然有配置项,但是好像并不能实现我想要的功能,我想实现的是如何自定义打开导航栏链接 ?...Butterfly的博客项目中,这些其实可以被称作独立于博客项目之外的项目,由于我把它也嵌入到Hexo + Butterfly博客项目里,导致他们的URL也必然成为https://fe32.top/xxx,这样就不能新窗口打开那些可以被称作独立于博客项目之外的项目了...效果预览 你可以直接打开本站导航栏中的旧版本、网址收藏、音乐长廊、旧版本入口这些链接体验效果。 这里我用v4.8.5主题版本跑了一遍,只做了简单测试,未过多美化!...valArray[1] i.fa-fw(class=trim(valArray[1])) span=' '+ lab 在想要新窗口打开的导航栏后面添加

20710

Chrome下的打开新窗口

一般点击打开新窗口,有几种方式: 1、超链接a  有href属性、target为_blank 2、iframe,其target为_blank 3、window.open 4、form表单提交,同样target也必须设为_blank 现在遇到一个需求: 做了一个后台运维管理系统,在点击datagrid头部一个按钮,需要打开一个新窗口...因为extjs运行效率比较低,所以选择使用chrome访问系统,而在操作些按钮的时候发现很多很奇特的现象,这些现象只出现在chrome中: 1、打开一个窗口后,些窗口不关闭,将无法打开多个窗口,即使原有窗口关闭...,就是弹出的窗口是没有工具栏和地址栏的,且不在新选项卡中打开 后来搜索到一篇文章,有所启发,就有了如下的代码: var nwin = window.open(); nwin.location = ‘xxxx...’;//需要打开的地址 如果使用ajax请求地址后面的参数的话,需要将ajax改为同步,不然弹出的窗口会在新窗口打开,而且没有工具栏和地址栏的

3.5K30

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.8K10

FLEXFLASH-冒泡事件与非冒泡事件

刷新页面 点击“外部BTN” 结果如图所示 因为事件的引发者没有在panl1中所以不会再触发panel1的事件了 以上说的都是非冒泡事件事件的执行顺序是从外层容器到内层容器执行的 5....如果要在事件冒泡阶段捕捉事件 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为...是false 这样设置后就是冒泡事件事件的执行顺序是从内层容器到外层容器执行的 6....如果即要捕捉非冒泡事件,又要捕捉冒泡事件 那么 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数...);//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听 这样设置之后,事件先从外部执行到内部

86510
领券