JavaScript中的一个错误

A bug in a JavaScript

本文关键字：一个 错误 JavaScript      更新时间：2023-09-26

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

如果你想让点击按钮在隐藏时显示弹出窗口，在显示时隐藏弹出窗口（点击其他任何地方都会隐藏弹出窗口），那么就是你的代码块导致了问题：

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

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

hideDropDown(ele);

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

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

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/

相关文章：