Как остановить событие, когда пользователь нажимает внутри определенных элементов, используя JavaScript

Question

Я хочу, чтобы этот код проверял, нажал ли пользователь внутри открытого окна, и если это так, то он останется открытым, также если пользователь щелкнет за пределами окна, оно закроется.

http://jsfiddle.net/MTJa5/26/

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);
        }();
    }
}();

Answer 1

Вместо привязки нескольких прослушивателей событий вы также можете привязать только одно click событие и использовать свойство event.target, чтобы проверить, где вы щелкнули.

Обновленный код менее сложен и прост в обслуживании.

Демо: http://jsfiddle.net/MTJa5/28/

 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);
 }();