在 div 上添加 OnClick 事件

Question

我正在尝试添加 div 中的按钮事件。

HTML :

<template id="modele-panier" type="text/AhuntsicModele">
  <div class="dialog-item">
    <table>
      <tr>
        <td>
          <img src={cheminImage} alt="">
        </td>
        <td>
          <h2>Article : {libelleProduit}</h2>
          <p>Qte : {qteProduit} prix : {prixProduit}$</p>
        </td>  
        <div class="supp">
          <td>
            <a href="#" id="{libelleProduit}">Supprimer </a>
          </td>
        </div>
      </tr>
    </table>
  </div>
</template>

Controler.js

document.addEventListener('click', function (e) {
  if (e.target && e.target.matches('button')) {
    controleur.ajouterPanier(e.target.id);
  } else if (e.target && e.target.matches('#main')) {
    controleur.loadCatalogue();
  } else if (e.target && e.target.matches('#getBMW')) {
    controleur.loadBMW();
  } else if (e.target && e.target.matches('#getAudi')) {
    controleur.loadAudi();
  } else if (e.target && e.target.matches('#getMercedes')) {
    controleur.loadMercedes();
  } else if (e.target && e.target.matches('#icone_compte')) {
    controleur.creationCompte();
  }  // THIS EVENT RIGHT HERE :
  else if (event.target.matches('supp')) { 
    alert(e.target.id)
    controleur.supprimerItem();
  }
});

我无法将事件添加到 div class 假设所有其他都工作正常，因为我没有为其他事件使用 div class . 谢谢

Answer 1

如果我没理解错的话，您希望您的控制器逻辑检测并处理带有 supp class 的元素上的点击事件。

要通过对代码进行最少的更改来实现这一点，您可以通过 classList 界面执行以下操作：

document.addEventListener('click', function(e) {
  
  /* Existing code removed for bervity */
  
  /* Use classList.contains method to check if target element has supp class */
  if (event.target.classList.contains('supp')) {
    alert(e.target.id)
    controleur.supprimerItem();
  }

});

<table>
  <tr>
    <td><img src="https://via.placeholder.com/150" alt=""></td>
    <td>
      <h2>Article : {libelleProduit}</h2>
      <p>Qte : {qteProduit} prix : {prixProduit}$</p>
    </td>
    <div class="supp">
      <td><a href="#" id="foo">Supprimer </a></td>
    </div>
  </tr>

</table>

我假设点击处理程序针对的是动态添加到 DOM 的元素（这就是为什么如果检查单击处理程序？） - 另一种可能会给你更多灵活性的逻辑方法是通过类似 CSS 的选择器和 querySelector() 方法查询 DOM：

document.addEventListener('click', function(e) {
  
  /* Existing code removed for bervity */
  
  /* Query document during click for first .supp relative to table */
  const suppDiv = document.querySelector("table .supp")
  if(suppDiv) {
    alert('clicked .supp')
  }

});

<table>
  <tr>
    <td><img src="https://via.placeholder.com/150" alt=""></td>
    <td>
      <h2>Article : {libelleProduit}</h2>
      <p>Qte : {qteProduit} prix : {prixProduit}$</p>
    </td>
    <div class="supp">
      <td><a href="#" id="foo">Supprimer </a></td>
    </div>
  </tr>

</table>

希望对您有所帮助！

Answer 2

你可以使用这个

const div = document.getElementsByClassName("supp");

  else if (div[0]!=undefined) { 
    alert(e.target.id)
    controleur.supprimerItem();
  }

希望对您有所帮助

Answer 3

您正在尝试使用函数参数 event，您的函数中并未调用该参数。您在函数中将参数命名为 e。

此外，.matches() checks if an element would normally be targeted based on a selector string. Which is what you would normally use to target elements with document.querySelector()。所以supp应该改为.supp.

因此，当您将代码更改为：

时，您的代码应该可以正常工作

} else if (e.target.matches('.supp')) { 
  controleur.supprimerItem();
}

甚至：

} else if (e.target && e.target.matches('.supp')) { 
  controleur.supprimerItem();
}

就像您的其他 if 语句一样。

这里是一个片段，显示此代码应该按预期工作：

document.addEventListener("click", function (e) {
  if (e.target && e.target.matches(".supp")) {
    alert("It works");
  }
});

.supp {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

<div class="supp">Click me</div>

在 div 上添加 OnClick 事件

add OnClick event on a div

javascript

html

events

eventhandler