开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ie中js防止冒泡

在Internet Explorer（IE）浏览器中，使用JavaScript防止事件冒泡可以通过调用事件对象的cancelBubble属性来实现。事件冒泡是指一个事件发生在某个元素上，然后向上传播到它的父元素，直到到达文档根节点。有时，我们希望阻止这种传播，这时就可以使用cancelBubble属性。

以下是一个示例代码，展示了如何在IE中防止事件冒泡：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>防止事件冒泡示例</title>
<script type="text/javascript">
function stopBubble(event) {
    // 兼容IE和其他浏览器的事件对象获取方式
    event = event || window.event;
    if (event.stopPropagation) {
        // 非IE浏览器
        event.stopPropagation();
    } else {
        // IE浏览器
        event.cancelBubble = true;
    }
}
</script>
</head>
<body>
<div id="parent" style="border:1px solid red; padding:20px;">
    父元素
    <button id="child" onclick="stopBubble(event)">点击我</button>
</div>
<script type="text/javascript">
document.getElementById('child').onclick = function() {
    alert('按钮被点击');
};
document.getElementById('parent').onclick = function() {
    alert('父元素被点击');
};
</script>
</body>
</html>

在这个示例中，当点击按钮时，会触发stopBubble函数，该函数会检查是否存在stopPropagation方法（非IE浏览器），如果存在则调用它来阻止事件冒泡。如果不存在（即在IE浏览器中），则设置cancelBubble属性为true来阻止事件冒泡。

这样，当你点击按钮时，只会弹出“按钮被点击”的提示框，而不会触发父元素的点击事件，即不会弹出“父元素被点击”的提示框。

需要注意的是，随着现代浏览器的普及和IE浏览器的逐渐淘汰，cancelBubble属性的使用已经越来越少。现代浏览器普遍支持stopPropagation方法，因此在实际开发中，推荐使用stopPropagation来进行事件冒泡的控制。

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

有帮助

没帮助

相关·内容

js事件防止冒泡

事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现。...通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。...停止事件传播事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...与.target类似，这种方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用。只是，仅仅要我们通过jQuery来注冊全部的事件处理程序。就能够放心地使用这种方法。以下。...假设想要同一时候停止事件传播和默认操作，能够在事件处理程序中返回false。这是对在事件对象上同一时候调用.stopPropagation()和.preventDefault()的一种简写方式。

2.5K4 0

js中的冒泡排序

// 冒泡排序 var arr = [2, 4, 1, 6, 7, 8, 33, 11,77,88,99,3,100]; function sort(array

1.3K4 0

js事件冒泡

什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。...兼容性 IE 8及更早的版本，和Opera 7.0及更早的版本，不支持 addEventListener() 和 removeEventListener() 方法，他们使用的是一下方法代替：添加事件：...stopPropagation()方法 } else { window.event.cancelBubble = true; //否则，我们需要使用IE

11.8K4 2

JS 冒泡排序

算法简介冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序不符合要求就把它们交换过来。...时间复杂度和空间复杂度再谈谈冒泡排序的时间复杂度和空间复杂度吧！

3.7K1 0

JQuery IE下如何阻止keydown事件冒泡

今天凑巧碰到一件怪事: 1.问题描述：根据用户输入的内容按回车键作查询时,在IE下一直会触发一个Button按钮;IE下只有Button才会有这个问题，如果是a标签就不会有这样的问题?...浏览器　　e.preventDefault(); //阻止默认浏览器动作(W3C) } else { //IE中阻止函数器默认动作的方式　　...window.event.returnValue = false; } return false; } 2.停止事件冒泡 function stopBubble...的stopPropagation()方法 } else { //否则，我们需要使用IE的方式来取消事件冒泡　　window.event.cancelBubble = true; ...浏览器　　e.preventDefault(); //阻止默认浏览器动作(W3C) } else { //IE中阻止函数器默认动作的方式

1.6K3 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

js调用ie打印

<object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A...

25.6K3 0

图解-JS冒泡排序

冒泡排序：冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。

2.2K2 0

JS事件冒泡及阻止

DOCTYPE html> JS事件冒泡及阻止 div{...DOCTYPE html> JS事件冒泡及阻止 li{...有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble...注意不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。事件解决方案方式在不同浏览器，可能是有所区别的，有些不支持捕获型方案，多数浏览器默认冒泡型方案。...阻止冒泡并不能阻止对象默认行为，例如submit按钮被点击后会提交表单数据，需使用e.preventDefault();阻止默认行为，IE则是window.event.returnValue = false

6.6K2 0

阻止浏览器冒泡事件，兼容firefox和ie

return arg0; } } func=func.caller; } return null; } //阻止冒泡...getEvent(); if(window.event){ //e.returnValue=false;//阻止自身行为 e.cancelBubble=true;//阻止冒泡...}else if(e.preventDefault){ //e.preventDefault();//阻止自身行为 e.stopPropagation();//阻止冒泡

1.1K7 0

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

相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...方法：阻止事件冒泡和默认行为。事件冒泡：　 ? 　　阻止默认行为： ?

12.2K2 0

网页防止复制js代码

document.selection.empty();}; {/tabs-pane} {tabs-pane label="位置"} 放在Joe主题后台自定义body末尾处，效果没试请自行添加后尝试，建议电脑端测试，防止不生效

18K3 1

JS的事件冒泡和捕获

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

2.6K2 0

事件冒泡怎么解决，与ie的兼容又怎么解决

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie...

6852 0

js 事件冒泡和事件捕获

事件冒泡：事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。如下，点击obj3，依次弹出obj3、world、hello。...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。...ps：IE8和IE8以下的版本不支持addEventListener()，而是采用attachEvent()来实现事件绑定。目前只有IE和Opera支持attachEvent()。...IE9支持addEventListener()，同时也兼容IE8的attachEvent()方法，但是IE9和IE8对attachEvent()的实现有点不同。

3.2K3 0

JS防止站点被恶意保存

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

3.9K2 0

JavaScript停止冒泡和阻止浏览器默认行为

e:window.event; } js停止事件冒泡 function myfn(e){ window.event? ...window.event.returnValue = false : e.preventDefault(); } 以下是具体关于JavaScript停止冒泡和阻止默认行为的详细说明防止冒泡 w3c的方法是...window.event.returnValue == false; } } return false javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡...下面这个使用原生js，只会阻止默认行为，不会停止冒泡 IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera

2.2K2 0

IE下JS文件失效问题总结

今天遇到了一个很诡异的问题，Firefox下好好的页面，在IE下却接二连三的报错，这到底是什么地方产生的错误。经过一上午的仔细排查，发现了真凶原来是IE对于对象和数组定义的严格限制。...在JS中，我们一般定义数组和对象都如下： var arr = [ 　　arr1, 　　arr2, 　　arr3, 　　arr4 ]; 对象： var obj = { 　　param:one,...　　param:two, 　　param:three }; 如果最后的一项多了一个“,”，那么在IE中就会产生错误，从而最终导致引用的JS文件失效。...例如： js'> function a(){ ... } var obj = { 　　param:a,...　　param:b, 　　param:c, js'> a(); alert(obj); 这个时侯就会出现函数调用的错误

3.4K3 0

WebBrowser（IE）与 JS 相互调用

在开发中我们经常将WebBrowser控件嵌入Winform 程序来浏览网页，既然是网页那么少不了JS。下面就让我们来说说他们两之间的相互调用。...但是说到和JS的调用，不得不说还是IE 的WebBrowser 最为简单方便。至于IE 为啥方便而其他的不方便，以后我会写文章分析。...下面我们还是先看看WebBrowser怎么和JS交互把： WebBrowser 执行JS 代码如果脚本已经存在于网页中，我们可以使用 InvokeScript 方法 public object InvokeScript...JS代码。...JS 调用 C# 方法接下来，我们来说说今天的重点，在JS中怎么调用C# 提供的方法。

4.6K7 1

关于JS的事件捕获与冒泡

事件流，描述的是页面中接收事件的顺序。默认情况下，事件使用冒泡事件流，不使用捕获事件流。...捕获与冒泡事件捕获：执行顺序(document->html->body->div) 事件冒泡：执行顺序(div->body->html->document) IE 冒泡...IE 9+|chrome|firefox|safari：事件冒泡+事件捕获阻止捕获与冒泡 event.stopPropagation() 示例代码 <!...}, true); inner.addEventListener('click', function (event) { console.log('inner-->事件冒泡...('click', function (event) { console.log('outer-->事件冒泡'); }, false) </html

2.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭