我必须编写一个代码,在具有相同类的所有输入上运行单击事件,而无需循环和 jquery。
我想出的是:
document.body.addEventListener('click', function (click) {
if (click.target.className == 'abc') {
document.frame.screen.value += this.value;
}
});
并且单击可以工作,但我得到了未定义
,而不是单击的输入包含的值。
最佳答案
and click works but I got undefined instead of value that clicked input contain.
因为你在获取值时使用的是this
而不是click.target
;您想使用click.target
:
document.frame.screen.value += click.target.value;
// Here -----------------------^^^^^^^^^^^^
您的处理程序中的 this
将是 document.body
。您在检查类时正确使用了 click.target
,但在获取值时却没有正确使用。
一些注意事项:
- FWIW,事件处理程序中事件参数的常用名称是
event
或e
,而不是click
。 - 元素可以有多个类,这些类都位于
className
中。 如果这对您来说可能是一个问题,您可以查看.classList.contains("abc")
。 (classList
可在所有现代浏览器上使用,并且您可以在过时的浏览器上对其进行填充。) 这对于
input
元素来说不是问题,但将来如果您想对可以具有后代元素的元素执行此操作,您可能需要一个循环来处理以下可能性:单击目标元素的后代:var node = event.target; while (!node.classList.contains("abc")) { if (node === this) { return; // The click didn't pass through a matching element } node = node.parentNode; } // Use it here
关于javascript - 在具有相同类的所有元素上添加 Click 事件,无需循环和 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45936769/