在 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>

控制器.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

如果我理解正确，您希望您的 controller 逻辑使用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 的元素（这就是为什么您在点击处理程序内部运行 if/else if 检查的原因？） - 这种逻辑的另一种方法可能会给您一个更多的灵活性是通过类似 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

您正在尝试使用 function 参数event ，在您的 function 中未调用该参数。 您在 function 中命名了参数e 。

此外， .matches()检查元素是否通常基于选择器字符串作为目标。 这是您通常使用document.querySelector()来定位元素的方法。 所以supp应该改为.supp 。

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

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

甚至：

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

就像您的 if 语句的 rest 一样。

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

 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>