0

子リンクをクリックしたときに親イベントが起動するのを止めたい。ここに私のコードがあります：

$('.list_row_inputtype').on('click',function(event) {

    $(this).find('a.link_to_fire').click();
    event.stopPropagation();
  
    return false;
});


<div class="list_row_input_type unread"> 
    <a href="#" onclick="toogleRead(); return false;" class="toogleRead"></a>
    <a href="{corePath}/mails" class="link_to_fire">{emailLink}</a>
    <div class="description"></div>
</div>

クリックする.toogleReadと機能が起動しますが、ページにも変更され{corePath}/mailsます。ページが変わるのを防ぎたい。

4

2 に答える 2

1

.toogleReadjQueryを介して要素にイベントハンドラーを追加する必要もあります。ハンドラーが接続されている場所を覚えるのが簡単で、2つの方法が混在することはなく、HTMLとJavascriptをより適切に分離できます。

これが動作するデモですhttp://jsfiddle.net/pomeh/uFV9R/。

HTMLコード

<div class="list_row_input_type unread"> 
    <a href="#" class="toogleRead"></a>
    <a href="{corePath}/mails" class="link_to_fire">{emailLink}</a>
    <div class="description"></div>
</div>

Javascriptコード

$('.list_row_input_type').on('click',function(event) {
    event.stopPropagation();
    // your stuff
});

$('a.toogleRead').on('click',function(event) {
    event.stopPropagation();
});

もう1つのポイントは、jQueryを使用してイベントハンドラーからfalseを返すことは、ほとんどの場合、悪い習慣と見なされます。それはあなたが通常それらのうちの1つだけをしたいところにあまりにも多くのことをします。これを詳細に説明する2つのリンクがありますhttp://fuelyourcoding.com/jquery-events-stop-misusing-return-false/およびhttp://css-tricks.com/return-false-and-prevent-default/。

于 2012-05-09T13:02:13.713 に答える
0

代わりに clent イベントを配置できますaか? これで、イベントの伝播について心配する必要がなくなります。

$('.list_row_input_type.unread a.toggleRead').click(function(e) {
  e.preventDefault();
  toggleRead();
});
于 2012-05-09T12:56:40.543 に答える