e.stopPropogation（）是否等效于Click事件的捕获阶段？

Question

I'm looking for a way in JS to stop a click event from continuing down the DOM to a nested child element (capture phase) when the parent element was clicked.

It would be the inverse of the e.stopPropogation() function to prevent a click event from bubbling up.

Is there a native JS function for this?

Edit 03/10 Link to example

Edit 03/11 Typo in the function call - it's stopPropagation() , not stopPropogation() . Thanks to @JackPattishall for the find.

Answer 1

yes there is native js function for capturing event in capture phase.

In all browsers, except IE<9, there are two stages of event processing.

The event first goes down - that's called capturing, and then bubbles up. This behavior is standartized in W3C specification.

All methods of event handling ignore the caputiring phase. Using addEventListener with last argument true is only the way to catch the event at capturing.

elem.addEventListener( type, handler, phase )

phase = true The handler is set on the capturing phase. phase = false The handler is set on the bubbling phase.

For better understanding of event capturing and bubbling you can follow this link

Answer 2

okey, One thing you and do is use the stopPropogation() at the top in Dom.

eg. you have a table(#table1) and elements(tr,td). so, if i do:

table1.addEventListener("click",function(event){
  event.stopPropagation();
  console.log(this);
},true);
tableElem[2].addEventListener("click",function(event){
  console.log(this);
});
tableElem[2].addEventListener("click",function(event){
  console.log("hii");
});

The event will be intercepted at top and propogation will be stopped. stopPropogation() stops propagation irrespective of on which step event is intercepted.