开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 冒泡事件打开新窗口

基础概念

JavaScript 中的冒泡事件（Event Bubbling）是指当一个元素上的事件被触发时，该事件会从目标元素开始，逐级向上传播到它的父元素，直到传播到文档根节点。这种机制允许在多个嵌套元素上处理同一事件。

相关优势

代码复用：可以在父元素上统一处理多个子元素的事件，减少代码量。
灵活性：可以根据需要选择在哪个层级处理事件，提高代码的可维护性。

类型

捕获阶段（Capture Phase）：事件从文档根节点开始，逐级向下传播到目标元素。
冒泡阶段（Bubble Phase）：事件从目标元素开始，逐级向上传播到文档根节点。

应用场景

表单验证：在表单提交时，可以在父元素上统一处理所有输入框的验证。
导航菜单：点击某个菜单项时，可以在父元素上处理菜单的展开和收起。

打开新窗口

在 JavaScript 中，可以使用 window.open() 方法来打开一个新窗口。结合冒泡事件，可以在父元素上监听点击事件，并在新窗口中打开链接。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Bubbling Example</title>
    <style>
        .container {
            padding: 20px;
            border: 1px solid #ccc;
        }
        .item {
            padding: 10px;
            margin: 5px;
            border: 1px solid #aaa;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item" data-url="https://example.com/page1">Item 1</div>
        <div class="item" data-url="https://example.com/page2">Item 2</div>
        <div class="item" data-url="https://example.com/page3">Item 3</div>
    </div>

    <script>
        document.querySelector('.container').addEventListener('click', function(event) {
            if (event.target.classList.contains('item')) {
                const url = event.target.getAttribute('data-url');
                window.open(url, '_blank');
            }
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：新窗口未打开

原因：

window.open() 方法被浏览器的弹窗拦截器拦截。
data-url 属性值为空或格式不正确。

解决方法：

确保 window.open() 方法在用户交互事件（如点击事件）中调用，以避免被拦截。
检查 data-url 属性值是否正确，并确保其为有效的 URL。

示例代码（修正）

document.querySelector('.container').addEventListener('click', function(event) {
    if (event.target.classList.contains('item')) {
        const url = event.target.getAttribute('data-url');
        if (url && url.trim() !== '') {
            window.open(url, '_blank');
        } else {
            console.error('Invalid URL:', url);
        }
    }
});

通过这种方式，可以确保在点击 .item 元素时，正确打开新窗口，并且避免常见的弹窗拦截问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS 新窗口打开超链接

第一种给a标签添加点击事件：源码： //点击百度一下进行百度搜索 $("#baiduBtn").click(function(){ this.href="http...this.target= "_blank"; this.open(); // $("#baiduTxt").val(""); }); 采用js... 的 window对象打开：源码： //给百度搜索添加快捷键 $("#baiduTxt").keydown(function(event){ if(event.keyCode

16.2K4 0

JS post方式打开新窗口

原理：前端在打开浏览器窗口的同时，放入一段html代码。 html代码包含表单，也就相当于模拟表单post方式提交。后端接口也通过表单的方式接受参数。...btn_amp" type="button" value="点点点" /> js

5360 0

js事件冒泡

什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。...stopPropagation()方法 } else { window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡

11.8K4 2

js --- 事件冒泡事件捕获

先上结论：　　他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。方法：阻止事件冒泡和默认行为。事件冒泡：　 ? 　　阻止默认行为： ?

12.2K2 0

js事件防止冒泡

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

2.5K4 0

FastAdmin 自定义事件中打开新窗口

#FastAdmin 自定义事件中打开新窗口—亲测可行–且可设置窗口大小找到控制器对应的js文件，找到如下代码 Table.api.bindevent(table); 在这段代码前面插入如下代码 $(...console.log(111); Fast.api.open('draw/prize/send', '选择发放区域', {area:["100%", "100%"]}); }); 类名是自己点击按钮的类名，打开地址换成自己的...，窗口大小自己修改一下，就ok了未经允许不得转载：肥猫博客 » FastAdmin 自定义事件中打开新窗口

1.2K1 0

js 事件冒泡和事件捕获

事件冒泡：事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。如下，点击obj3，依次弹出obj3、world、hello。...addEventListener('click', function () { alert('obj3'); })//依次弹出obj3、world、hello 阻止事件冒泡的方法...：方式一：event.stopPropagation(); 方式二：return false; return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。

3.2K3 0

JS事件冒泡及阻止

事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。...实例当点击id为i3的时，浏览器会依次弹出3 2 1，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。 JS事件冒泡及阻止 div{...DOCTYPE html> JS事件冒泡及阻止 li{...注意不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。事件解决方案方式在不同浏览器，可能是有所区别的，有些不支持捕获型方案，多数浏览器默认冒泡型方案。

6.6K2 0

JS事件流、事件冒泡、阻止冒泡、事件捕获（一看就懂）

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

16.6K6 4

JS的事件冒泡和捕获

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

2.6K2 0

在新窗口打开链接

最近博主再用H+模板时候表单提交和链接都在新窗口打开，没看见target="_blank"，一直没查出来，苦恼N久，今天百度了如何用JS css等等实现网页所有链接在新窗口打开，终于找到了原因，因如下代码导致

2.7K2 1

关于JS的事件捕获与冒泡

事件与事件流事件，是文档或浏览器窗口发生的一些特定的交互事件。事件流，描述的是页面中接收事件的顺序。默认情况下，事件使用冒泡事件流，不使用捕获事件流。...捕获与冒泡事件捕获：执行顺序(document->html->body->div) 事件冒泡：执行顺序(div->body->html->document) IE 事件冒泡...IE 9+|chrome|firefox|safari：事件冒泡+事件捕获阻止捕获与冒泡 event.stopPropagation() 示例代码 <!...('click', function (event) { console.log('middle-->事件冒泡'); // 阻止事件冒泡，外层不会再捕获到事件...}, false); outer.addEventListener('click', function (event) { console.log('outer-->事件冒泡

2.7K2 0

写了一个打开最大新窗口的JS

在IE里面如果使用a标签的target=”_black”打开的新窗口，那么窗口的大小是由最后一次关闭窗口时窗口大小决定的，如果我们希望a标签打开的新窗口都是最大的窗口，那么我们需要使用window.open...另外在IE7里面还有另外一个问题就是如果我们是用a标签打开的新窗口，那么在window.close()的时候会弹出提示问是否关闭该窗口，而且这个问题不能使用window.opener=null来避免这个提示框...所以我们必须是使用window.open来打开新窗口，那么就可以使用window.close()而不会弹出关闭窗口的提示。

3.3K3 0

JS事件，你真的懂吗（捕获，冒泡）？

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

2.5K2 0

JS示例36-如何阻止事件冒泡

'block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡

4.8K2 0

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

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

6.6K1 0

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

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 在想要新窗口打开的导航栏后面添加

2571 0

Typecho文章链接用新窗口打开

这篇文章是我去年发过的，今天重新搭建Blog刚好需要就找了一下想着应该会有人需要就重新发一下用PHP函数实现文章链接用新窗口打开在主题里function.php添加 parseContent()

2K2 0

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.6K3 0

事件冒泡，阻止事件冒泡 e.stopPropagation()

阻止冒泡 js" type="text/javascript"> ...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用事件的对象来调用stopPropagation()方法。...： 1.一个事件起泡对应触发的是上层的同一事件　单击two的时候就会起泡触发one单击的事件。...3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。

2.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭