jquery中stopImmediatePropagation和stopPropagation

案例：

需求：当class为shop-select-no时，点击区域只执行shop-select-no的点击事件；当class为shop-select-yes时，点击区域只执行shop-select-yes的点击事件；

HTML：
<div class="shop-select-no">
</div>


JS：
$('#main').on('click','.shop-select-no',function (e) {
    e.stopImmediatePropagation();
    //e.stopPropagation()
    $(this).removeClass("shop-select-no").addClass("shop-select-yes");
});

$('#main').on('click','.shop-select-yes',function (e) {
    e.stopImmediatePropagation();
    //e.stopPropagation()
    $(this).removeClass("shop-select-yes").addClass("shop-select-no");
});

概念：

stopImmediatePropagation ：

阻止事件流中当前节点的和所有后续节点的事件监听器的执行。即影响当前结点的事件监听器。

stopPropagation：

阻止事件流中当前节点的所有后续节点的事件监听器的执行。即不会影响当前节点(currentTarget)的任何事件监听。

所以上述案例中，如果使用stopPropagation，则点击一次后，两个点击事件同时会执行，使用stopImmediatePropagation才能只执行一次

案例2：

// 注册顺序,就是代码的执行顺序 
$("#button1").click(function(event){ 
    alert(1); 
}); 

$("#button1").click(function(event){ 
    alert("2before"); 
    event.stopImmediatePropagation(); 
    //event.stopPropagation(); 
    alert("2after"); 
}); 

$("#button1").click(function(event){ 
    alert(3); 
});

如果使用的是stopPropagation，执行结果是1–>2before–>2after–>3;

如果使用的是stopImmediatePropagation，执行结果是1–>2before–>2after;