1

javascriptでドロップダウン水平メニューを実行しようとしています。FirefoxとChromeでは問題なく動作しますが、IEで問題が発生します。

これが私が持っているコードです

function init(){

    hideAllSubMenu();

    var menuItem = document.getElementById("menu_wrap").getElementsByTagName("div");

    for(var index = 0; index < menuItem.length; index++)
    {
        // if firefox and all oother browsers
        if(typeof menuItem[index].addEventListener != "undefined")  
        {
            menuItem[index].addEventListener("mouseover", ShowListener, false);
            menuItem[index].addEventListener("click", ShowListener, false);
        }
        else //IE
        {
            menuItem[index].attachEvent("onclick", ShowListener);
            menuItem[index].attachEvent("onmouseover", ShowListener);
        }       
    }
}


function ShowListener(event)
{
    hideAllSubMenu();

    var menuItemIdStr = this.id;
    var menuItemIdNum = menuItemIdStr.replace(/menu/i, "");
    var subMenu = document.getElementById("submenu_wrap" + menuItemIdNum);

    subMenu.style.left = this.offsetLeft + "px";
    subMenu.style.top = this.offsetTop + this.offsetHeight + 2 + "px";
    subMenu.style.display = "block";
}

これについて不平を言っているようです。IEでは、リスナー関数がコピーではなく参照であることを理解しています。そのため、これが問題になります。この問題を回避する方法はありますか？

IEのattachEvent用に別の関数を作成し、そこにオブジェクトを直接パスしようとしましたが、それでも文句を言います。

そんな感じ

menuItem[index].attachEvent("onmouseover", ShowListenerIE(menuItem[index]));

注：このシンプルなメニュー機能をJQueryに書き直す予定ですが、今のところJavaScript Core + DOMの学習に興味があり、この問題を回避する方法を見つけたいと思います。

前もって感謝します。

4

2 に答える 2

3

IEのイベントのターゲットはにありevent.srcElement、他のブラウザでも同様の情報をから取得できますevent.target。IEは、イベントを引数としてハンドラーに渡さないことにも注意してくださいwindow.event。代わりに、イベントが渡されます。したがって、完全なソリューション：

if (!event)
{
    event = window.event; //IE
}

var target;
if (event.target)
{
    target = event.target;
}
else if (event.srcElement)
{
    target = event.srcElement;
}

//From here on is your code, use target instead of this

厄介な詳細については、こちらをご覧ください。免責事項：私のコードはテストされていません。

于 2009-08-08T22:09:18.603 に答える
3

上記の答えに加えて、私は通常、より多くのJavaScript-yをコーディングするこの方法を使用します。

function eventHandler( event ){
    var event  = window.event || event;
    var target = event.srcElement || event.target;
}
于 2009-08-09T03:32:32.313 に答える