Introduction to the difference between event.cancelBubble and event.stopPropagation()_jquery

First of all, I saw many articles on the Internet that are generally divided into two (incorrect) views:
1. cancelBubble is used to prevent bubbling events in IE, and event.stopPropagation() is used in other browsers such as firefox and chrome. .
Let’s not talk about whether the above is right or wrong
Let’s look at an example: (Test environment: chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8)

Copy code The code is as follows:

Tested:
a,chrom5.0.275.7, opera10. 53, ie6,7,8 In these browsers, cancelBubble is effective and can prevent the event from bubbling so that the body's onclick cannot be triggered. Only the click of the button is triggered
alert(event.cancelBubble); the output result is true
b. In the moz3.6.4 version, the onclick of the body cannot be prevented, but the output result of alert(event.cancelBubble); is still true, I think this should be event.cancelBubble just adds an attribute to the event and assigns it to true;
When the js code is changed to this:

Copy Code The code is as follows:

can be effectively blocked. Of course, event.stopPropagation(); in chrome and opera is also valid.
Conclusion 1: The above shows that event.cancelBubble is already supported in the new versions of chrome and opera browsers, only moz is missing. In fact, I personally think event.cancelBubble. cancelBubble is better than event.stopPropagation(), not only in the English sense. So I hope moz will release a new version and support it. This is compatible with
2. There are also frequently asked questions about the order of events:
Incompletely accurate conclusion (in my opinion)
ie: source event element->> parent element event ->>body-->>document
moz: Wait for other browsers to be the opposite of the above
Let’s look at an example first:

Copy code The code is as follows:

If I click the button event now from the body---->div----->button,,,,then Just alert the body first and then trigger the div to pop up 123. Since bubbling is prevented, the click of the button will not trigger.
But it has been tested by us. moz is still triggered from the inside out. Correctly execute alert("btn")--->>alert("123")----to prevent bubbling and not trigger the click event of the body
At this point, you may wonder that the above is incorrect, but The above statement is correct for events added with addListenter and attachEvent (). For example:

Copy code The code is as follows:

• List Item1


• List Item2

用这种方法 是符合的。执行结果是触发ul的click事件然后由于阻止了冒泡所以此时你点击li时，其本身的click事件不触发。（顺便说一句，用这种动态添加事件的方法，好像 event.cancelBubble在moz中也有效了不过在chrome和moz中有区别）