DIVタグでjavascript onclickを使用して、クリック可能なリンクを含むセクションの表示を切り替える方法

Question

こんにちは。最初にタイトルのみが表示されるDIVセクションがあります。私が達成したいのは、訪問者がtoggle_sectionの領域のどこかをクリックすると、toggle_stuff divが表示/非表示を切り替えることです。

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php">Some link</a>
    </div>
</div>

ただし、現在の設定方法では、<a>内に<=>リンクがある場合、そのリンクをクリックするとonclickイベントも実行されます。

次に、このタイプの動作を設定する最良の方法は何ですか？

Answer 1

最も単純な解決策は、イベントの伝播を停止するDIV内のリンクに追加のonclickハンドラーを追加することです。

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php"
            onclick="Event.stop(event);"
        >Some link</a>
    </div>
</div>

上記の例では、クロスブラウザを容易にするために、Prototypeの Event.stop() 関数を使用していますイベント伝播の停止。

インラインonclick()ハンドラーを使用すると、ほとんどの（すべてではないにしても）ブラウザーが最初にバブリングフェーズでイベントをトラバースします（これが目的です）。

この動作の背後にある実際の理由とイベントキャプチャとイベントバブリングの違いを理解するための優れたガイドは、優れた Quirksmode。

Answer 2

スクリプト内：

function overlayvis(blck) {
  el = document.getElementById(blck.id);
  el.style.visibility = (el.style.visibility == 'visible') ? 'hidden' : 'visible';
}

アクティベーターリンク、続いてコンテンツ（ページ上で他にない理由はありません）：

<div onclick='overlayvis(showhideme)">show/hide stuff</div>
<div id="showhideme">
  ... content to hide / unhide ...
</div>

モーダルウィンドウjavascript cssオーバーレイから取得しました-を検索する必要がありましたソースであり、このサイトであることがわかって喜んでいます。 ：）

Answer 3

最初の質問を投稿した後、もう一度考えようとするのを待つことができず、これを達成するための非常に簡単な方法を見つけたようです。

onlick Effect.toggleを次のような別の関数に移動しました。

function someClick(event) {
    if (event.target.nodeName == 'A') {
        return;
    } else {
        new Effect.toggle('toggle_stuff', 'slide');
    }
}

これはAタグでのみ機能し、クリック可能な他のタグでは機能しないと思われます。

Answer 4

これが機能するかどうかはわかりませんが、link要素にtoggle_section divより大きなz-index値を指定してみてください。

次のようなもの：

#toggle_section a { z-index: 10; }

Answer 5

onclickハンドラを追加して、イベントの伝播を停止します。

JQueryを使用する場合： onclick = <！> quot; event.stopPropagation（）<！> quot;

プロトタイプの使用： onclick = <！> quot; Event.stop（event）<！> quot;