如何在用户使用JavaScript在某些div内单击时停止事件

我希望这段代码检查用户是否在打开框内单击，如果是，则它将保持打开状态，如果用户在框外单击，则它将关闭

var-box=function（）{
var divClicks=document.getElementsByClassName（“clickToShow”）；
对于（i=0；i

除了绑定多个事件侦听器，您还可以只绑定一个

单击

事件，并使用

event.target

属性检查单击的位置

更新后的代码不那么复杂，更易于维护

演示：

var hellos=function（）{
功能关闭此框（targ）{
var allbox=document.getElementsByClassName（'openedBox'）；
对于（变量i=allbox.length-1；i>=0；i--）{
if（所有框[i]！==targ）{
allbox[i].className='closedBox'；
}
}
}
window.addEventListener（'click'，函数（ev）{
var targ=电动汽车目标；
//遍历树，直到找到所需的/根元素
while（target&&target！==document.documentElement）{
if（target.className.indexOf（'openedBox'）！=-1）{
关闭此盒（targ）；
//在打开的框内单击时不执行任何操作
返回；
}
//点击
if（target.tagName.toLowerCase（）=='p'&&target.parentNode.className.indexOf（'clickToShow'）！=-1）{
关闭此框（目标父节点）；
target.parentNode.getElementsByTagName（'div'）[0]。类名='openedBox'；
返回；
}
target=target.parentNode；
}
//此时，单击不在正确的位置。
//通过删除closedBox类名来关闭所有框
var-box=document.getElementsByClassName（'openedBox'）；
对于（变量i=box.length-1；i>=0；i--）{
框[i].className='closedBox'；
}
}，假）；
}();

这很管用，但我想保留它，这样如果你打开一个盒子，然后打开另一个盒子，那么第一个盒子就打开了closes@jamcoupe你的答案与RobW的无关。无论在何处实现事件侦听器，都应该存储对上次打开的框的引用。@RobW您的代码工作得非常好！你有没有关于DOM和投手事件的进一步阅读资料可以推荐？@PointedEars OP的回答？你是说评论吗？最后一个引用应该存储在一个引用中，这是一个非常好的观察结果。但是，我对OPs代码的其余部分一无所知，因此我不能想当然地认为所有打开的div请求都是由click事件触发的。@jamcoupe是一个很好的开始。MDN通常是JavaScript、HTML、CSS和其他一些技术的良好参考。停止事件是错误的理念。忽略事件是一个更好的主意。您永远不知道什么事件处理程序可能依赖于该事件。

var boxes = function(){
    var divClicks = document.getElementsByClassName("clickToShow");
    for(i=0; i < divClicks.length; i++){
        var click = divClicks[i];

        var clickEvent = function(){
            click.addEventListener("click", function(e){
                var currentClass= this.getElementsByTagName('div')[0].className;
                var divs = document.getElementsByClassName('openedBox');
                for(var i = 0; i < divs.length; i++){
                    divs[i].setAttribute("class", "closedBox");

                }

                if(currentClass === "openedBox"){
                    this.childNodes[3].setAttribute("class", "closedBox");
                } else {
                    this.childNodes[3].setAttribute("class", "openedBox");

                }
            },false);
        }();
    }
}();

 var hellos = function() {
     function closeAllButThisBox(targ) {
         var allBoxes = document.getElementsByClassName('openedBox');
         for (var i=allBoxes.length-1; i>=0; i--) {
             if (allBoxes[i] !== targ) {
                 allBoxes[i].className = 'closedBox';
             }
         }
     }
     window.addEventListener('click', function(ev) {
         var targ = ev.target;
         // Traverse the tree, until you hit the desired / root element
         while (targ && targ !== document.documentElement) {
             if (targ.className.indexOf('openedBox') !== -1) {
                 closeAllButThisBox(targ);
                 // Do nothing when clicking inside an opened box
                 return;
             }
             // This will open boxes, if closed, when clicking at the <p>
             if (targ.tagName.toLowerCase() === 'p' && targ.parentNode.className.indexOf('clickToShow') !== -1) {
                 closeAllButThisBox(targ.parentNode);
                 targ.parentNode.getElementsByTagName('div')[0].className = 'openedBox';
                 return;
             }
             targ = targ.parentNode;
         }
         
         // At this point, the click is not at the right place.
         // Close all boxes by removing the closedBox class names
         var boxes = document.getElementsByClassName('openedBox');
         for (var i=boxes.length-1; i>=0; i--) {
             boxes[i].className = 'closedBox';
         }
     }, false);
 }();