在JavaScript中e.target無法正常工作

Question

我已經編寫了一些JavaScript，可在單擊某個元素時打開一個元素。 但是我不能

 var menu = document.getElementById(show);
 if (menuOpen && e.target !== menu){...}

這不適用於我想要的方式，因為：

1. 當我一次只想打開一個時，可以打開多個顯示的元素。

2. 當我在元素內部單擊時，它關閉了，我只希望它們在框外單擊時關閉。

    function openBox(button, show){ var menuOpen = false; //to toggle when the button is clicked. // checks the whole document for clicks and then if the element is open it will > // check to see if you have clicked away from it or not. document.addEventListener("click", function(e){ var menu = document.getElementById(show); if (menuOpen && e.target !== menu){ // if elements open and the click event target does not match > menu.style.display = "none"; // we will close it menuOpen = false; } },false); // add an event listner to the button element and then if its clicked stop any > // links an stop bubbling and then change the display style. document.getElementById(button).addEventListener("click", function(e){ var menu = document.getElementById(show); e.preventDefault(); e.stopPropagation(); if (menuOpen){ menu.style.display = "none"; menuOpen = false; } else { menu.style.display = "block"; menuOpen = true; } },false); } openBox("signInButton", "signIn"); openBox("bagButton", "shoppingBag"); openBox("currencyButton", "currencySelect"); 

http://jsfiddle.net/jamcoupe/9CEGw/

編輯：@Felix Kling發布后，我將代碼更改為：

document.addEventListener("click", function(e){
    var menu = document.getElementById(show);
    if (menuOpen && (e.target.parentNode !== menu) && (e.target !== menu)){    
        menu.className = "closedBoxes";       
        pointer = document.getElementById(arrow).className = "arrowE";
        menuOpen = false;
    }
    },false);

這已經解決了第一個問題，但是我仍然堅持如何制作它，以便一次給定的時間只能打開一個盒子。 因此，當用戶打開登錄框並單擊currencyChanger時，我希望關閉登錄框。

http://jsfiddle.net/jamcoupe/kcF9Z/7/

Answer 1

當我在元素內部單擊時，它關閉了，我只希望它們在框外單擊時關閉。

正如我在評論中已經說過的，如果該框包含其他元素，則e.target並不引用該框本身，而是引用該框內的元素。

因此，為了測試單擊是否在外部，必須測試e.target是框內的元素還是框本身。 為此，您必須遍歷DOM樹。

例：

var target = e.target;
while(target && target !== menu) {
    target = target.parentNode;
}

if(!target) {
   // click was outside of the box
}

當我一次只想打開一個時，可以打開多個顯示的元素。

如果要使三個對話框相互依賴，則必須維護一些共享狀態。 我建議您不要使用三個對話框，而可以使用一個對話框管理器來負責打開和關閉框。

例：

function DialogManager() {
    this.dialogs_ = {};
    this.openedDialog_ = null;

    this.init_();
}

DialogManager.prototype.init_ = function(e) {
    var self = this;
    document.addEventListener('click', function(e) {
        var id = e.target.id;
        if(id && id in self.dialogs_) { // if one of the buttons was clicked.
            self.openDialog(id);        // the dialog is opened (or closed)
            return;
        }

        if(self.openedDialog_) { // if a dialog is currently open, we have to
            var target = e.target; // close it if the click was outside
            while(target && target.id !== self.openedDialog_) {
                target = target.parentNode;
            }
            if(!target) {
                self.closeDialog(self.openedDialog_);
            }
        }
    }, false);
};

DialogManager.prototype.registerDialog = function(button_id, dialog_id) {
    this.dialogs_[button_id] = dialog_id;
};

DialogManager.prototype.openDialog = function(id) {
    var open_id = this.openedDialog_;
    if(open_id) {
        this.closeDialog(open_id);
    }
    if(id !== open_id) {
        var dialog = document.getElementById(this.dialogs_[id]);
        dialog.style.display = "block";
        this.openedDialog_ = id;
    }
};

DialogManager.prototype.closeDialog = function(id) {
        var dialog = document.getElementById(this.dialogs_[id]);
        dialog.style.display = "none";
        this.openedDialog_ = null;
};

DEMO

我希望這能給您一些想法。 還有很多可以改進的地方，例如，不管對話框是否打開，現在經理都監聽每個click事件。