Respond to the click bubbling event sideways, not just up

Question

I have nested click event handlers inside the component:

class ListItem extends React.Component {
    ...
    render() {
        return (
            <div onClick={this.save}>
              ...Content...
              <span onClick={this.onDeleteClick}> (Delete)</span>
            </div>
        );
    }
    ...
}

_{(A complete, minimal example is at the bottom of this post.)}

This component is used as a list item inside the containing component. When I click on (Delete), it launches onDeleteClickas expected, making a callback to the parent, which causes the component to be removed from the parent component. Then the click event will start to grow, as expected. However, it bubbles up to the next component in the parent list. In the end, the original target has already been deleted by the delete handler.

e.stopPropagation() onDeleteClick, , , click , , .

, - DOM , , DOM , DOM. , , .

, ? ? , , - ?

---

, : https://codepen.io/mgalgs/pen/dRJJyB

: https://codepen.io/mgalgs/pen/KqZBKp

diff "fix":

--- orig.jsx
+++ new.jsx
@@ -32,6 +32,7 @@
     }

     onDeleteClick(e) {
+        e.stopPropagation();
         this.props.onDeleteClick(e);
     }
 }

Answer 1

+1 .

W3C, :

EventTargets . , .

, . , DOM , , ( ).

, , . , , , , , .