Meteor.js：阻止事件传播的最佳方法

Question

Consider this template in Meteor.js.

<template name="trial">
  <li id='{{ _id }}'">{{ name }}
    <span>X</span>
  </li>
</template>

I want to add an event to the "li" and another one to the "span". How can I prevent the click on the span to fire the event attached to the li? I've found some posts talking about this, but they're years old.

Many thanks for your help!

Answer 1

To prevent event from bubbling-up to parent elements, use stopPropagation() of the event object. Works on either native JS events, or React events:

spanClickHandler(event) {
    event.stopPropagation();

    // handle click
    ...
}