web-dev-qa-db-ja.com

DIVタグでjavascriptonclickを使用して、クリック可能なリンクを含むセクションの表示を切り替えるにはどうすればよいですか？

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

<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>内にtoggle_sectionリンクがある場合、そのリンクをクリックするとonclickイベントも実行されます。

次に、私の質問は、このタイプの動作を設定するための最良の方法は何でしょうか？

javascriptcssprototypejsscriptaculous
8
Miro Solanka

最も簡単な解決策は、リンクにonclickハンドラーを追加する 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"
            onclick="Event.stop(event);"
        >Some link</a>
    </div>
</div>
_

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

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

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

7
Aron Rotteveel

スクリプト内：

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オーバーレイ から取得しました-ソースを検索する必要があり、それがこのサイトであることがわかりました。 :)

4
Chris

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

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

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

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

2
Miro Solanka

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

何かのようなもの ：

#toggle_section a { z-index: 10; }
0
andyk

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

JQueryを使用する場合：onclick = "event.stopPropagation（）"

プロトタイプを使用する場合：onclick = "Event.stop（event）"

0
Loren