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 コードを動的にしようとしましたが、できませんでした。常にエラーを返します。いろいろな要素とリンクさせたい。

更新
JavaScript コードの要素の s を変数 に置き換えてid、任意の要素で使用できるようにしたいのですが、実行しようとしましたが失敗しました。基本的に、要素の s の代わりに変数を使用idし、それを何らかの方法で要素に再度リンクしたいと考えています。

4

3 に答える 3

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

コードを次のように変更します

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

つまり、関数を代入する前に変数に格納します。

于 2012-08-25T12:24:29.400 に答える
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 に答える