2

次のjavascript関数に接続されているhtmlのテーブル内に行があります。

<script type='text/javascript'>
        $(window).load(function () {
            $(".clickable").click(function () {

                $(this).next().toggle();

            });
        });

この関数は、この行のすぐ下にあるコンテンツを展開します。この行には、クリックして別のページに移動するために使用されるリンクもあります。次のようになります。

ここに画像の説明を入力してください

リンクをクリックすると、移動先のページに移動する直前にコンテンツがすばやく展開されます。

リンクがクリックされた場合に、余分なコンテンツを展開するjavascript関数を呼び出さずにそのページに移動するように変更するにはどうすればよいですか？

4

1 に答える 1

5

リンクで、伝播を停止します。

$('.myNavLink').click(function(e){
   e.stopPropagation();
});

ドキュメントリンク：http ：//api.jquery.com/event.stopPropagation/

編集これを実装するのに問題があるので、ここに実際の例があります：

http://jsfiddle.net/Vs5B8/

1行のテーブルがあり、セルの1つにリンクがあることがわかります。

<table>
    <tr class="clickable">
        <td> one </td>
        <td> two </td>
        <td> <a href='http://www.google.co.uk' class="myNavLink"> click me </a> </td>
    </tr>
</table>

行にクリックイベントをフックしました：

$('.clickable').click(function(){
   alert("row click");
});

したがって、行の任意の場所をクリックするとアラートが表示されrow click、ハイパーリンクをクリックしたときにもアラートが表示されます。ただし、クリックイベントをに追加してa伝播を停止すると、この動作が停止します（つまり、リンクをクリックしたときにアラートが表示されません）。

$('.myNavLink').click(function(e){
   e.stopPropagation();
});
于 2012-07-25T15:47:09.560 に答える