javascript - JavaScript 代码中的错误

Question

演示： http: //jsfiddle.net/nazym/1/
该代码旨在在按下按钮时显示弹出窗口，并在按下其他任何位置时隐藏它。单击按钮两次时会发生错误。
因此，当重复单击按钮时，代码应该可以显示/隐藏弹出窗口。

Answer 1

如果您想让它点击按钮显示弹出窗口，如果它是隐藏的，如果它显示则隐藏它（并单击其他任何地方隐藏它），这是导致问题的代码块：

if (ele == element) {
    hideDropDown();
    return;
}

您没有将任何参数传递给 hideDropDown 函数。它应该是：

hideDropDown(ele);

这样，onclick 处理程序就会正确地添加到元素中。

Answer 2

这似乎是实现此功能的一种非常复杂的方式。你可以用更少的代码来做到这一点，如下所示：

document.onclick = function(e) {
    if (!e) e = window.event;
    var target = e.target || e.srcElement;
    document.getElementById("window").style.display = 
        document.getElementById("but") === target ? "inline-block" : "none";
};

也就是说，单击文档时，检查目标/源元素是否是您的按钮：如果是，则显示弹出窗口，否则隐藏它。

演示：http: //jsfiddle.net/nazym/12/

或者，如果您希望重复单击按钮来切换弹出窗口的显示，但单击其他​​任何地方隐藏它只需稍微修改条件：

document.getElementById("window").style.display = 
    document.getElementById("but") === target &&
    document.getElementById("window").style.display === "none" ? "inline-block" : "none";

演示：http: //jsfiddle.net/nazym/13/

编辑：为了迎合您关于单击弹出窗口不应隐藏它的评论，您可以在上面添加此代码：

document.getElementById("window").onclick = function(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) 
        e.stopPropagation(); // W3C model
    else 
        e.cancelBubble = true; // IE model
};
​

也就是说，防止弹出窗口中的点击冒泡，以免它们到达执行显示和隐藏的文档级点击处理程序。

演示：http: //jsfiddle.net/nazym/16/