有没有办法在两个单独的div上添加一个事件监听器,并且能够知道用户何时单独在一个div之外点击?

问题描述 投票:1回答:1

我正在编写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引用的内部和外部时。

javascript dom-events
1个回答
0
投票

您可以为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>
© www.soinside.com 2019 - 2024. All rights reserved.