0

私はJavascriptが初めてで、リンク要素のクリックイベントを使用してdivを表示/非表示にしようとしています。「クリック」を「マウスオーバー」に置き換えると、workPane は通常のホバー動作で表示されます。FF6.0.2を使用しています。完全なコードは www.pricelearman.com/__dev で見ることができます (2 つのアンダースコアが必要です) 

function showWorkPane() {
    var _workID = document.getElementById("workID");
    _workID.addEventListener("click", showWorkPaneHandler, false);
}

function showWorkPaneHandler(e) {
    e.preventDefault();
    var _workPane = document.getElementById("workPane");
    _workPane.style.display = "block";
}
4

1 に答える 1

0

私が知る限り、リンク<a id="workID" href="#">WORK</a>はクリック イベント ハンドラにバインドされていません。スクリーンショットでは、いくつかのイベントを設定していることがわかりますが、クリック時は設定されていません。

リンクにイベント リスナー onClick が設定されていません

main.jsでは関数showWorkPane () を呼び出していますが、この関数では onClick のイベント ハンドラを定義していません。

function showWorkPane() {
    var workID = document.getElementById("workID");
    workID.addEventListener("mouseover", showWorkPaneHandler, false);
    // add an event handler for click
}

あなたの質問に答えるには: DOM2 の「クリック」イベントは、「マウスオーバー」では機能するのに、なぜ機能しないのですか?

両方のイベント (クリックとマウスオーバー) をバインドする必要があります。現在、私はあなたのコードを調べていますが、発生するイベントハンドラー onmouseout が、workPanehideWorkPaneHandler(e)を表示する意図と競合しているようです。

一連の流れはこうです

  • ユーザーがリンク「仕事」の上にマウスを移動します
  • ユーザーがリンク 'work' をクリックします <-- 現在、このイベントハンドラはありません。追加する必要があります
  • ユーザーがリンクの外にマウスを移動 --> これが起動しますhideWorkPane(e)

更新 1: 機能していない理由

コメントの中で、ユーザーのFelix Kingは次のように述べています。それについてコメントしていただけませんか。動作しないバージョンをクリックしてオンラインに置き、ここにリンクしてください。

リンクにすべてのイベント (クリック、マウスオーバー、マウスアウト) を追加する場合、これが当てはまるかどうかに関係なく、リンクをクリックすることがリンクからマウスを移動すること (およびマウスアウトを起動すること) と競合しないという解決策を見つける必要があります。 .

更新 2: コードのリファクタリング

イベントはブラウザ間で同一ではないため、ヘルパー関数 ( quirksmode.org/ on eventsを参照)。必要に応じて、代わりに jQuery を使用できます。

function getTargetFromEvent(e) {
    // http://www.quirksmode.org/js/events_properties.html#target
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    return targ;
}

イベント ハンドラーの追加をラップする関数を作成しました。このように呼び出すことで使用できますaddEventShowPaneHandler('mouseover');

function addEventShowPaneHandler(eventType){
    document.getElementById("workID").addEventListener(eventType, showPaneHandler, false);
    document.getElementById("aboutID").addEventListener(eventType, showPaneHandler, false);
    document.getElementById("connectID").addEventListener(eventType, showPaneHandler, false);    
}

show---PaneHandler(e)次の関数は、すべての yourおよび your関数を置き換えますhide---PaneHandler(e)。必要なのは、対応するペイン ID をリンク内のデータ属性として追加することだけです。例：<li><a id="workID" data-paneId="workPane" href="#work">WORK</a></li>

function showPaneHandler(e) { // suggestion to rename it to  togglePaneDisplay
    e.preventDefault();
    if (!e) var e = window.event;
    console.log(e.type);
    var element = getTargetFromEvent(e); 
    // see nodeinformation attributes at http://www.quirksmode.org/dom/w3c_core.html 
    var paneId = element.attributes["data-paneId"].value;
    var pane = document.getElementById(paneId);

    if(pane.style.display == "block" || pane.style.display == "undefined")
    {
        pane.style.display = "none";   
    }else{
        pane.style.display = "block";           
    }     
}

したがって、ナビゲーション内の各リンクに対して、次のように data-paneId 属性をペインの対応する ID とともに追加します。

<nav role="navigation" id="pageNav">
<ul>
   <li><a id="workID" data-paneId="workPane" href="#work">WORK</a></li>  
   <li><a id="aboutID" data-paneId="aboutPane" href="#about">ABOUT</a></li>
   <li><a id="connectID" data-paneId="connectPane" href="#connect">CONNECT</a></li>
</ul>

他にご不明な点がある場合や、さらにサポートが必要な場合はお知らせください。

于 2013-07-17T08:08:08.787 に答える