【JavaScript阻止事件冒泡（兼容IE、Chrome、FF）】的更多相关文章

JavaScript 阻止事件冒泡的实现方法

JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function cancelBubble(evt) { // 阻止事件冒泡 if (window.event) { // Chrome,IE6,Opera window.event.cancelBubble = true; } else { // FireFox 3 evt.stopPropagation(); }…

JavaScript阻止事件冒泡（兼容IE、Chrome、FF）

这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr…

javascript阻止事件冒泡的兼容写法及其相关示例

//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } <!doctype html> <html> <hea…

javascript 阻止事件冒泡和阻止默认事件对比

公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并阻止事件冒泡到window)当点击上input的时候就显示ul再给window或者document 绑定一个click事件当点击页面其他地方的时候隐藏ul. 这里还要给ul 添加一个代理点击事件(事件代理比遍历li绑定点击事件性能要高)当点击到下面的li的时候把li里面的内容添加到input里面 并…

javascript 阻止事件冒泡 cancelBubble

javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div</button> <div id="showDiv"> 显示了 </div> js部分 window.onload = function(){ var btn1 = document.getElementById("btn1"); var…

javascript阻止事件冒泡和浏览器的默认行为

1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.stopPropagation ) 4 //因此它支持W3C的stopPropagation()方法 5 e.stopPropagation(); 6 else 7 //否则,我们需要使用IE的方式来取消事件冒泡 8 window.event.cancelBubble = true; 9 } 2.当按键后,不希望…

javascript 阻止事件冒泡

阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是div, div中有一个btn btn绑定一个click事件 div也绑定一个click事件 在点击btn时,会触发div的click事件,但是我们并不想触发div的click事件.因此要阻止事件冒泡. 实现代码: stopEventBubble: function(e){ if(e && e…

JavaScript阻止事件冒泡

今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #div1{ height: 200px; width: 200px; background-color: #3b77…

javascript阻止事件冒泡的方法

有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer"> <div class="inner"> </div> </div> css: #outer{ width:100px; height:100px; background:darkgrey; } #outer>.inner{ width…

JS如果阻止事件冒泡和浏览器默认事件

原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例. (1)阻止冒泡事件 注:嵌套元素一般都存在冒泡事件,会带来某些影响 最外层标签:outer,中间层标签:center,最内层标签:inner,并且在outer.center.inner都添加了alert弹框事件,在正常思维情况下…

一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡

回到页面顶部demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 2000px; } #up { position: fixed; bottom: 0; right: 0; width: 100px; heig…

javascript里阻止事件冒泡

如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true. 火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法.调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点. 我们看代码实例: <!doctype html> <html lan…

JavaScript事件冒泡机制和阻止事件冒泡及默认事件

一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event.stopPropagation(); //阻止事件冒泡函数 function stopBubble(evt) { var e = evt || window.event; if (e && e.stopPropagation) e.stopPropagation() else window.…

javascript 停止事件冒泡以及阻止默认事件冒泡

停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 阻止事件冒泡 function stopDefault( e ) {…

JAVAscript——菜单下拉列表练习(阻止事件冒泡)

下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x…

原生javascript实现阻止浏览器默认行为与阻止事件冒泡

不同的浏览器之间存在兼容问题,在IE与标准浏览器之间存在很大的差异,所以在实现阻止浏览器默认行为和阻止事件冒泡就要考虑要它们之间的不同 /** * 取消冒泡 * @param {事件} e */ function cancelBubble(e){ if(e.stopPropagation){ // w3c的方法取消冒泡 e.stopPropagation(); }else{ // 使用IE的方式来取消冒泡 e.cancelBubble=true; } } /** * 阻止浏览器默认行为 * @p…

javascript - 事件详解（阻止事件冒泡+阻止事件行为）

一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 (最不具体 –> 最具体) 2.事件处理 1.HTML事件处理 直接添加到HTML结构中 2.DOM0级事件处理 把一个函数赋值给一个事件处理程序属性 <button id="btn">按钮</button> <sc…

js中阻止事件冒泡和浏览器默认行为

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagat…

探讨JavaScript的事件冒泡

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现.使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素…

js阻止冒泡及jquery阻止事件冒泡示例介绍

js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev…

js区分鼠标单双击 阻止事件冒泡

function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find("td:eq(1)").text().replace(/※/g, '')); currentRowpm = rowStr; } timer = window.setTimeout(function(obj) { var currentTr = $("#tbMainDeputy"…

JavaScript(3)---事件冒泡、事件捕获

JavaScript(3)---事件冒泡与事件捕获 一.理解冒泡与捕获 假设有这么一段代码 <body> <div><p>标签</p> </div> </body> 转换成图如下 我们知道Dom是有节点关系的 body -> div -> p 之间的关系就是 爷爷 -> 父亲 -> 儿子. 我们来思考一个关键的问题 如果此时我们在 body div p 都绑定一个点击事件(click).此时如果我们只点击 p标…

JQuery阻止事件冒泡

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. <style>…

JS阻止事件冒泡

在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> <div id="nei"></div> </div> <script type="text/javascript"> $(document).ready(function(e) { $("#wai").cli…

设为首页 和 收藏本站js代码 兼容IE,chrome,ff

设为首页 和 收藏本站js代码 兼容IE,chrome,ff //设为首页 function SetHome(obj,url){ try{ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); }catch(e){ if(window.netscape){ try{ netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"…

JQuery阻止事件冒泡---阻止后续代码执行

(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢?因为事件源本身并没有处理事件的能力.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件). 当事件在…

jQuery阻止事件冒泡的例子

下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的朋友可进入参考. jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();  代码如下 复制代码 $("p").click(function(event){      event.stopPropagation(); // do so…

JQuery中阻止事件冒泡方式及其区别

JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function(event){             event.stopPropagation();         }); 方式二:return false;         $("#div1").mousedown(function(event){             return false…

在点击div中的p时，如何阻止事件冒泡？

今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者. 我还是以一个案例来说明问题,html代码如下: <div onclick="show('a')"> <p onclick="show('b')"></p> </div> css代码如下: div{ width:500px; height:500px; background:r…

javascript的事件冒泡【转】

出处:http://www.cnblogs.com/sanshi/archive/2009/02/18/1393165.html (感谢三生石上) 这是一个基础性的文章,使用Javascript观察DOM中的事件冒泡机制,并介绍如何阻止默认行为和如何组织事件冒泡的方法. 1. 第一个例子可以在Firefox下运行 <div id="container1" onclick="alert('click container1');">     <div …