остановка выполнения функции onClick в контейнере div при нажатии на внутренний элемент - PullRequest
Новая
       55

остановка выполнения функции onClick в контейнере div при нажатии на внутренний элемент

1 голос
/ 01 апреля 2020

У меня проблема с пузырем событий. У меня есть карта с функцией onClick. На карте есть значок сердца, который также имеет функцию onClick. Когда я щелкаю по значку сердца на карточке, чтобы отличать ее от карты, выполняется также функция onClick fn для всей карточки, которая выводит меня на другую страницу, на которой отображается более подробная информация о карточке, в частности грузовик с продуктами. Как я могу предотвратить это?

Я пробовал это: 

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

Но с этим кодом я получаю сообщение об ошибке: «e.stopPropagation не является функцией. "

карта: 

<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)}
/>

enter image description here

Ответы [ 4 ]

2 голосов
/ 01 апреля 2020

В вашем событии onClick вы также можете передать событие, которое вы можете использовать, чтобы узнать, кем был отправитель, используя 

<button value="hello!" onClick={e => alert(e.target)}>
  Click me!
</button>
1 голос
/ 01 апреля 2020

Вы можете попробовать использовать Event.stopPropagation () в функции дочернего элемента:

Метод stopPropagation() интерфейса Event предотвращает дальнейшее распространение текущего события в фазах захвата и барботирования. 

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>
1 голос
/ 01 апреля 2020

Проверьте этот код. Требуемая функция называется 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>
1 голос
/ 01 апреля 2020

Для вас просто передайте событие вместе с идентификатором грузовика в вашу внутреннюю функцию 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>
...