event事件对象有三种易混淆的方法，本文讲述他们之间的区别：

• Event.preventDefault()
• Event.stopPropagation()
• Event.stopImmediatePropagation()

综述

首先，我们看看他们在MDN上的介绍：

• preventDefault: 如果当前event.cancelable属性为true，则取消的当前事件的默认动作，但不阻止当前事件的进一步传播
• stopPropagation: 阻止当前冒泡或捕获阶段的进一步传播
• stopImmediatePropagation: 阻止调用相同事件的其他监听器

Event.preventDefault

我们来看一个代码示例，当点击一个form中的submit按钮时会将form提交处理，此时如果使用Event.preventDefault，就可以在点击submit按钮时避免表格提交。

    
    
     
        
      姓名:        
          
     
    
     
        
      电子邮箱:        
          
     
    
     
        
      消息:        
          
     
        
     
        
      发送你的消息    
     
    

$('#myForm').on('submit', function(e) {    e.preventDefault(); // 什么都不会发生});

Event.preventDefault能确保表格不会被提交，但他不能阻止来自冒泡阶段的submit或点击事件，其他两种方法就是解决这个问题的。

Event.stopPropagation

stopPropagation 保证当前事件不再进一步冒泡，通过以下代码示例说明：

    
    
     点击我!
    

$('.container').on('click', function(e) {    console.log('container 被点击了');});$('.element').on('click', function(e) {    e.preventDefault(); // 此时链接不会跳转    console.log('element 被点击了');});

此时点击链接，console会显示：

"element was clicked""container was clicked"

这时如果添加Event.stopPropagation:

$('.container').on('click', function(e) {    console.log('container 被点击了');});$('.element').on('click', function(e) {    e.preventDefault(); // 此时链接不会跳转    e.stopPropagation(); // 此时事件冒泡被阻止    console.log('element 被点击了');});

再次点击链接，会看到：

"element 被点击了"

Event.stopImmediatePropagation

以上两种方法已经可以解决我们在事件处理中90%的问题，接下来介绍一种无法解决情形。

同样是使用上面的示例，但这次我们给<a/>添加2个class，一个是被所有<a/>共享的class: item，另一个是独有的class: element，假设这两个class对当前网站的功能很重要。

    
    
     Click Me!
    

我们首先使用之前提到的Event.stopPropagation

$('.item').on('click', function(e) {    console.log('item 被点击了');});$('.element').on('click', function(e) {    e.preventDefault(); // 此时链接不会跳转    e.stopPropagation(); // 此时事件冒泡被阻止    console.log('element 被点击了');});

当我们点击<a/>时，将会显示：

"item 被点击了""element 被点击了"

这个现象会发生是因为item与element在DOM中是被平等对待的，与之前<a/>被点击然后冒泡到父级div不同，这次我们点击同时触发了item与element的事件，此时使用stopPropagation无法阻止这种事件。

stopImmediatePropagation登场~

$('.element').on('click', function(e) {    e.preventDefault(); // 此时链接不会跳转    e.stopImmediatePropagation(); // item的点击事件将被阻止    console.log('element 被点击了');});$('.item').on('click', function(e) {    console.log('item 被点击了');});

这里我们要注意的一点是：stopImmediatePropagation的代码要尽量放到其他同级竞争事件代码的上面，如上面的例子中，为了使stopImmediatePropagation起作用，我们将element的事件监听代码放到了item之前！

运行最后一例中的代码，将只会看到：

"element 被点击了"