[英]add OnClick event on a div
我正在嘗試添加一個 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。 謝謝
如果我理解正確,您希望您的 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>
希望有幫助!
你可以用這個
const div = document.getElementsByClassName("supp");
else if (div[0]!=undefined) {
alert(e.target.id)
controleur.supprimerItem();
}
希望能幫助到你
您正在嘗試使用 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.