我正在编写Javascript代码,根据用户点击的类别显示某个类别的图片,但在过滤后的图片外点击时会显示所有类别。然而,我需要相同的代码独立处理单独的div,而不是整个dom。
将事件侦听器附加到文档的工作除外,因为您可能已经猜到,它不能独立地在两个div上工作。当我将它附加到参考dom时,让我们知道dom id,它可以工作,但它不知道用户何时在外面点击
document.addEventListener("click", (evt) => {
//get an array of all the div with "column" class
var imgElements = imgGrid.getElementsByClassName("column");
var w, x;
var y, z;
let targetElement = evt.target; // clicked element
do {
//itirate through all the divs we got the reference for
for (var i = 0; i < imgElements.length; i++) {
//check if we click on any of those divs
if (targetElement.className == imgElements[i].className) {
//we clicked on a div
//let's get the class name we want to filter by
w = imgElements[i].className;
x = w.split(' ');
console.log("You clicked on a: " + x[1]);
//we're not done //let's go itirate those divs once more
//but this time for everyone that don't have a class that
//matched our filter class we hide it, else we show it
for (var i = 0; i < imgElements.length; i++) {
y = imgElements[i].className;
z = y.split(' ');
if (z[1] != x[1]) {
addClass(imgElements[i], "hidden");
} else {
removeClass(imgElements[i], "hidden");
}
}
return;
}
}
// Go up the DOM.
targetElement = targetElement.parentNode;
} while (targetElement);
console.log("You clicked outside");
//other useful things being done here
});
而不是“document.addEventListener”,我会说DomId.addEventlistner,并期望它知道当我点击每个dom引用的内部和外部时。
您可以为DIV提供“可点击”的唯一类名。这样你的逻辑就不必知道每个'内部'DIVs id。
function handleClick(e) {
if (e.target.className != "clickableDiv") {
console.log("clicked outside");
} else {
var element = e.target.id;
console.log(element + " clicked");
}
}
document.addEventListener("click", handleClick);
<div id="container1" class="clickableDiv">
DIV1
</div>
<div id="container2" class="clickableDiv">
DIV2
</div>
<div id="container3">
I'm not clickable
</div>