8

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

<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 イベントも実行されます。

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

4

5 に答える 5

7

最も簡単な解決策は、イベントの伝播を停止する追加の 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>

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

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

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

于 2009-01-04T19:01:29.247 に答える
4

スクリプト内:

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

于 2012-10-24T16:37:22.630 に答える
2

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

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

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

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

于 2009-01-04T19:40:12.167 に答える
0

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

何かのようなもの ：

#toggle_section a { z-index: 10; }
于 2009-01-04T18:38:58.733 に答える
0

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

JQuery を使用する場合: onclick="event.stopPropagation()"

プロトタイプ使用: onclick="Event.stop(event)"

于 2010-12-13T11:33:42.513 に答える