jQuery事件冒泡及解决办法

什么是事件冒泡：在一个对象上触发某类事件（比如onclick事件），如果次对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

成都创新互联公司是专业的达坂城网站建设公司，达坂城接单;提供成都网站建设、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行达坂城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

事件冒泡的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡：事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){

})

代合并阻止操作：实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用.

// event.stopPropagation();

// event.preventDefault();

// 合并写法：

return false;

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法：bind

事件委托的写法：

如果我们要取消事件的委托：

//ev.delegateTarge 委托的对象

$(ev.delegateTarge).undelegatee();

//如果是上面的两种例子可使用//$list.undelegate();

创建节点： ('div')

var ('div这是一个div元素/div');

插入节点:

1、append()和appendTo()：在现存元素的内部，从后面插入元素

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

js 在阻止默认事件的同时不影响滚动条

js阻止默认事件的方式有两种：

使用e.preventDefault()方法，例子如下  

/**

* 1.阻止元素的默认事件，但是不会阻止事件冒泡

*/

var link = document.getElementsByTagName('a')[0];

link.addEventListener('click',function(e){

      e.preventDefault();

});

2.如果是在jquery中，可以使用return false,例子如下：

/**

* 2.阻止元素的事件冒泡

* Jquery和原生的Js在这点上有些不同，

* 原生的Js要通过e.stopPropagation()方法阻止事件冒泡

* 而Jquery则可以直接return false;来阻止事件冒泡

* e.stopPropagation()方法不会阻止元素的默认行为，但是

* return false;会阻止元素的默认行为。

*/

var btn = document.getElementById('btn');

btn.addEventListener('click',function(e){

return false;

});

事件冒泡是什么如何用jquery阻止事件冒泡

（1）什么是事件起泡

首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。

当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。

当事件在传播过程中，找到了一个能够处理它的函数，这时候我们就说这个函数捕捉到了这个事件。

说到这里，关键的问题来了，那就是一个函数是如何捕捉一个事件的呢？这就涉及到事件的冒泡了。

为了更好地理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。

这些对象的层次关系构成了DOM中的对象树。

事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。

所以，如果这个按钮上面有3层（form、document、window），且这三层都定义了onclick属性，则当按钮的click事件产生时，将会调用4个（包括按钮本身的一个）函数或执行4段语句。

事件的这几个特性在0级dom中也是适用的。

（2）jquery阻止事件起泡实例

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

复制代码 代码如下:

$("form").bind(

"submit",

function() {

return false;

}

);

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

复制代码 代码如下:

$("form").bind(

"submit",

function(event){

event.preventDefault();

}

);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

复制代码 代码如下:

$("form").bind(

"submit",

function(event){

event.stopPropagation();

}

);

（3）关于js事件起泡的验证

今天这个问题主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。

复制代码 代码如下:

script type="text/javascript"

$(document).ready(function(){

$('.one').click(function(e){

alert('one');

});

$('.two').click(function(e){ 　

alert('two');

});

$('.three').click(function(e){

alert('three');

//阻止起泡取消下面的注释

// e.stopPropagation();

});

});

/script

div class="one" style="width:200px;height:200px;background:green;"

one

div class="two" style="width:150px;height:150px;background:yellow;"

two

div class="three"

three

/div

/div

/div

（4）总结

1.一个事件起泡对应触发的是上层的同一事件

特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件

（双击包含单击）。

2.如果在click事件中，在你要处理的事件之前加上e.preventDefault();

那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。

3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。

如何禁用a标签，是禁用事件，而不是什么阻止跳转之类的

你指的是禁用默认事件？

a href="baidu.com"百度/a

1.jQuery 阻止默认事件

$("a").click(function( event ) {

event.preventDefault(); // 阻止默认事件

event.stopPropagation(); // 阻止冒泡

});

2.javascript 

var elem = document.getElementByTagName("a");

elem.addEventListener("click",function(event){

event.preventDefault(); // 阻止默认事件

event.stopPropagation(); // 阻止冒泡

},false);

说明：

preventDefault();   // 阻止默认事件

stopPropagation();  // 阻止冒泡

return false;   // 既阻止默认事件 也阻止冒泡

jquery事件对象event有哪些属性和方法

1.event.type属性

该方法作用是可以获取到时间的类型。

2.event.preventDefault()方法

该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装，使之能兼容各种浏览器。

3.event.stopPropagation()方法

该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装，使之能兼容各种浏览器。

4.event.target属性

event.target属性的作用是获取到出发事件的元素。jQuery对其封装后，避免了W3C、IE和safari浏览器不同标准的差异。

5.event.relatedTarget属性

在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性，在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装，使之能兼容各种浏览器。

6.event.pageX/event.pageY属性

该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时，那么IE浏览器中是用event/event.y方法，而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条，则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。

7.event.which属性

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按钮。

8.event.metaKey属性

针对不同浏览器对键盘中的ctrl按键解释不同，jQuery也进行了封装，并规定event.metaKey()方法为键盘事件中获取ctrl按键。

9.event.originalEvent属性。

该方法的作用是指向原始的事件对象。

当前文章：jquery阻止默认事件,jquery禁止点击事件
分享链接：http://kswjz.com/article/dsggdid.html