单击内部元素时停止执行容器 div 中的 onClick 函数

Question

我遇到了事件冒泡问题。我有一张具有 onClick 功能的卡片。在卡片上，有一个心形图标，它也有一个 onClick 功能。当我单击卡片上的心形图标以取消对卡片的关注时，整个卡片的 onClick fn 也在执行，这会将我带到另一个页面，该页面呈现有关卡片的更多详细信息，特别是食品卡车。我怎样才能阻止这种情况发生？

我试过这个：

const removeFromFavorites = (e, truckId) => {
    props.removeFromFavoriteTrucks(props.dinerId, truckId);
    e.stopPropagation();
}

但是使用这段代码，我收到一条错误消息："e.stopPropagation is not a function."

卡片：

<Card className="truck-card" onClick={() => selectTruck(truck.id)}>
  <CardActionArea>
    <CardMedia
      className="truck-img"
      image={truck.image}
      style={{ width: '100%' }}
    />
    <i
      className="like-icon"
      class={filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
      onClick={() => removeFromFavorites(truck.id)}
    />
    <CardContent className="truck-contents">
      <Typography className="truck-name" gutterBottom variant="h5" component="h2">
        {truck.name}
      </Typography>
      <Typography className="cuisine-type" component="h3">
        {truck.cuisine_type}
      </Typography>
    </CardContent>
  </CardActionArea>
</Card>

点击处理函数：

const selectTruck = truckId => {
  props.setSelectedTruck(truckId);
  setInitialMode(false);
}
const removeFromFavorites = (truckId) => {
  props.removeFromFavoriteTrucks(props.dinerId, truckId)
}

更新：

所以我需要做的是将 e 传递到我的内部 div 函数中，在其中调用 e.stopPropagation，然后将 e 也放入我的 onClick 中。 * 口才不够，请见谅。这是代码：

const removeFromFavorites = (e, truckId) => {
    props.removeFromFavoriteTrucks(props.dinerId, truckId);
    e.stopPropagation();
}

<i 
    className="like-icon" 
    class={ filterThroughFavs(truck.id).length > 0 ? "fas fa-heart" : "far fa-heart"}
    onClick={(e) => removeFromFavorites(e, truck.id)}
/>

Answer 1

对于您来说，只需将事件连同卡车 ID 传递给您的内部 div 函数

参见以下stopPropagation()方法示例来自
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_stoppropagation

<!DOCTYPE html>
<html>
<body>
<style>
div {
  padding: 50px;
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
  cursor: pointer;
}
</style>

<h1>The stopPropagation() Method</h1>

<p>Click DIV 1:</p>
<div onclick="func2()">DIV 2
  <div onclick="func1(event)">DIV 1</div>
</div>

Stop propagation:
<input type="checkbox" id="check">

<p></p>

<p>Because DIV 1 is inside Div 2, both DIVs get clicked when you click on DIV 1.</p>
<p>Check the stop propagation checkbox, and try again.</p>
<p>The stopPropagation() method allows you to prevent propagation of the current event.</p>

<script>
function func1(event) {
  alert("DIV 1");
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

function func2() {
  alert("DIV 2");
}
</script>

</body>
</html>

Answer 2

您可以尝试在子元素函数中使用Event.stopPropagation()：

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

const removeFromFavorites = (truckId) => {
  props.removeFromFavoriteTrucks(props.dinerId, truckId);
  event.stopPropagation();
}

演示：

const selectTruck = truckId => {
  alert('You have clicked Parent');
}
const removeFromFavorites = (truckId) => {
  alert('You have clicked Child');
  event.stopPropagation();
}

div {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  color: green;
}

<div onclick="selectTruck()">Parent
  <div onclick="removeFromFavorites(44)">Child</div>
</div>

Answer 3

查看此代码。你想要的函数叫做 event.stopPropagation().

<body>
  <div id="parent">
    <button id="child" onclick="event.stopPropagation()">Child</button>
  </div>

  <script>
    var parent = document.querySelector('#parent');
      parent.addEventListener('click', function(){
        console.log("Parent clicked");
      });
    var child = document.querySelector('#child');
      child.addEventListener('click', function(){
        console.log("Child clicked");
      });
  </script>
</body>

Answer 4

在你的 onClick 事件中，你也可以传递该事件，你可以使用它来找出发件人是谁

<button value="hello!" onClick={e => alert(e.target)}>
  Click me!
</button>

单击内部元素时停止执行容器 div 中的 onClick 函数

stop onClick function in container div from executing when clicking inner element

javascript

events

stoppropagation

reactjs

更新：