jQuery append元素不断添加onclick元素

Question

我正试图在单击父菜单项时将自定义元素附加到子菜单项。当我单击父项时，代码会添加自定义元素。但是，当我在添加自定义元素后单击子项(CUSTOM ELEMENT(的空白区域时，它会不断追加元素。

$("li:has(ul)").click(function(e) {
e.preventDefault();
$("ul", this).animate({
width: "40%"
}, 200);

var ele = '<h4 class="m-level-2" style="color: #d4dce5; text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 1.875rem;margin-bottom: 0.5rem;">Altron<h4><h2 class="h4" style="color: #52c3df;text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 3.75rem;margin-bottom: 1rem;"></h2><a href="#" class="nav-menu-back" style="color: #fff;font-size: 1rem;font-family: Montserrat,sans-serif;text-transform: none;">Go Back</a><hr style="background-color: #d4dce5; margin: 1.875rem 0;opacity: 1;height: 1px;" class="menu-hr">';
$("ul", this).prepend(ele);
let text = $(this).find("a").first().text();
//console.log(text);
$("ul", this).find("h2").text(text); 
});

Answer 1

单击子元素将触发父元素上的单击处理程序。你可以通过检查e.currentTarget来检查点击是否源于你的目标元素。试试这个：

$("li:has(ul)").click(function(e) {
e.preventDefault();
if(e.target !== e.currentTarget){
return;
}
$("ul", this).animate({
width: "40%"
}, 200);

var ele = '<h4 class="m-level-2" style="color: #d4dce5; text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 1.875rem;margin-bottom: 0.5rem;">Altron<h4><h2 class="h4" style="color: #52c3df;text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 3.75rem;margin-bottom: 1rem;"></h2><a href="#" class="nav-menu-back" style="color: #fff;font-size: 1rem;font-family: Montserrat,sans-serif;text-transform: none;">Go Back</a><hr style="background-color: #d4dce5; margin: 1.875rem 0;opacity: 1;height: 1px;" class="menu-hr">';
$("ul", this).prepend(ele);
let text = $(this).find("a").first().text();
//console.log(text);
$("ul", this).find("h2").text(text); 
});

这个答案解释了currentTarget和target：JavaScript 中currentTarget属性和target属性之间的确切区别是什么