addeventlistener 相关问题

我有一组这样的物品：我有一套这样的物品： <label for="Cadenza-1" class="cars"> <input type="checkbox" value="1" alt="Cadenza" id="Cadenza-1" name="vehicles[]"> <img src="img/bill_murray_173x173.jpg"> <span>Cadenza</span> </label> 大约有13个。我想在单击时向标签添加一个类。但是，单击事件会触发两次。现在我正在调试单击事件，然后我将添加该类： var cars = document.getElementsByClassName('cars'); for(var c = 0;c < cars.length; c++){ cars[c].addEventListener("click", function(e){ selectVehicle(cars[c],e); },false); } function selectVehicle(el,e) { console.log(e); e.stopPropagation(); } console.log 会发射两次。尝试在 stopPropogation 之后添加 PreventDefault： function selectVehicle(el,e) { console.log(e); e.stopPropagation(); e.preventDefault(); } 我认为最好将 console.log(e) 放在 stopPropogation 和 PreventDefault 之后。然后，您还需要实现将复选框设置为选中的功能，因为这会阻止这种情况发生。当 <span> 或 <img> 收到“click”事件时，会将 DOM 向上冒泡到 <label> 元素，并且将调用您的事件处理程序。然后，<label> 会触发 <input> 元素上的另一个 “单击”事件，并且该事件也会冒泡到 <label>。您可以检查处理程序以查看是否单击了<input>： function selectVehicle(el,e) { if (e.target.tagName !== "INPUT") return; // do stuff } 或者，您可以仅将“单击”处理程序添加到 <input> 本身。现在您还会注意到您的代码无法正常工作，因为您遇到了在循环内绑定事件处理程序的常见问题。问题是，在事件处理程序实际运行时，变量 c 的值将是 cars 列表的长度。有几种方法可以解决这个问题；一种是使用 forEach() 循环而不是 for 循环： [].forEach.call(cars, function(car) { car.addEventListener("click", function(e){ selectVehicle(car,e); }, false); }); 您要将事件侦听器添加到标签，您应该将事件侦听器添加到复选框，因为标签行为复制在 for 中分配的相同输入。请注意，如果您仅单击复选框，则回调可以正常工作，这是因为标签上的事件是由复选框引发的。正确的方法是仅为复选框添加事件侦听器或在 setlectVehicle 回调中添加阻止默认值。您不需要阻止Default或stopPropagation，而只需在输入元素上添加监听器即可。 cars[c].children[0].addEventListener("click", function(e) { 试试这个。它正在按预期工作。此外，如果标签元素包含所需的输入/其他元素，则不需要将 Id 与标签一起使用 var cars = document.getElementsByClassName('cars'); for (var c = 0; c < cars.length; c++) { cars[c].children[0].addEventListener("click", function(e) { selectVehicle(cars[c], e); }, false); } function selectVehicle(el, e) { console.log(e); } <label class="cars"> <input type="checkbox" value="1" alt="Cadenza" name="vehicles[]"> <img src="img/bill_murray_173x173.jpg"> <span>Cadenza</span> </label> <label class="cars"> <input type="checkbox" value="1" alt="Cadenza" name="vehicles[]"> <img src="img/bill_murray_173x173.jpg"> <span>Cadenza 2</span> </label> 或者您可以简单地保留 JavaScript 代码不变。并将输入元素放在标签之外，如下所示： <label for="Cadenza-1" class="cars"> <img src="img/bill_murray_173x173.jpg"> <span>Cadenza</span> </label> <input type="checkbox" value="1" alt="Cadenza" adenza-1" name="vehicles[]"> 这是你的Javascript 未触及： var cars = document.getElementsByClassName('cars'); for(var c = 0;c < cars.length; c++){ cars[c].addEventListener("click", function(e){ selectVehicle(cars[c],e); },false); } function selectVehicle(el,e) { console.log(e); e.stopPropagation(); } 我发现只有一个对我有用的解决方案：强制调用 addEventListener 一次。我回答了这个问题：https://stackoverflow.com/a/76873072/8122578

javascript addeventlistener

回答 6 投票 0

为什么 vanilla js addEventListener 在 WordPress 中不起作用？

我检查了其他类似的问题，但它们的代码都有错误。这是一个不同的情况。这段代码中的 jQuery 部分工作正常，但如果我使用普通 js，

javascript wordpress addeventlistener

回答 1 投票 0

有没有办法在addEventListener中同时定位两个事件？

我正在尝试使用 JavaScript 定义一些悬停属性。因此，我决定为元素使用“mouseenter”和“mouseleave”事件。现在，我必须调用相同的函数...

javascript addeventlistener

回答 2 投票 0

使用 jQuery on() 和 off() 切换事件监听器

我有一个 JavaScript 代码片段“代码片段 1 - 在用户触摸交互上播放通过 Ajax 加载的 html 视频”，它使用 on('touchstart') jQuery 方法附加事件侦听器...