1 
document.getElementById("but").onclick = showDropDown;

function showDropDown(e) {
    document.getElementById("but").onclick = function() {};
    if (e.stopPropagation) e.stopPropagation(); // W3C model
    else e.cancelBubble = true; // IE model
    document.getElementById("window").style.display = "inline-block";
    document.onclick = function(e) {
        var ele = document.elementFromPoint(e.clientX, e.clientY);
        if (ele == document.getElementById("but")) {
            hideDropDown();
            return;
        }
        do {
            if (ele == document.getElementById("window")) return;
        } while (ele = ele.parentNode);
        hideDropDown();
    };
}

function hideDropDown() {
    document.onclick = function() {};
    document.getElementById("window").style.display = "none";
    document.getElementById("but").onclick = showDropDown;
}​


<input id="but" type="button" value="pressMe" />
<div id="window" style="display:none">popup</div>

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

我试图使用变量而不是指定元素的名称使 JavaScript 代码动态化，但我做不到。它总是返回错误。我想将它与不同的元素联系起来。

更新
我想id用变量替换 JavaScript 代码中元素的 s，这样我就可以将它与任何元素一起使用。我试图这样做但失败了。基本上，我想使用变量而不是id元素的 s 并以某种方式再次将其链接到元素。

4

3 回答 3

0

将代码更改为

var showDropdown = function(e) { ... };
document.getElementById("but").onclick = showDropDown;

换句话说，在分配之前将函数存储在变量中。

于 2012-08-25T12:24:29.400 回答
0

在您的代码中：

> document.onclick = function(e){

在支持 IE 事件模型的浏览器中，e将是未定义的。为了适应这些浏览器，您可以使用：

    e = e || window.event;

要查找被点击的元素，而不是：

>   var ele = document.elementFromPoint(e.clientX, e.clientY);

你可以做：

    var ele = e.target || e.srcElement;

这将在比elementFromPoint更多的浏览器中工作，因此应该更可靠和更快。

于 2012-08-25T12:37:54.287 回答
0

改用参数：

function showDropDown(element, e) {

    element.onclick = function() {};

    // ....

    hideDropDown(element);

}

你会给元素它的 onclick 事件处理程序，如下所示：

document.getElementById('but').onclick = function(event) {
    showDropDown(this, event);
};

演示：http: //jsfiddle.net/xNSZm/

于 2012-08-25T12:49:02.900 回答