6

私は2つのhtmlページを1つ持ってindex.htmlおり、groups.html各ページはul>li>異なるクラス名のリストです。

次のように、クリックイベントを別のjsファイルに配置しました。

// Index Page Onclick events

  $('body').on('click','.menuClass',function(e) {
    e.preventDefault();
    var menuid = $(this).attr('id');
    alert(menuid);        
  });

// click on groups html  >>  this page alert fires twice

$('body').on('click','.grpClass',function(e) {
    e.preventDefault();
    var menuid = $(this).attr('id');
    alert(menuid);

});

スクリプトファイルは両方のhtmlファイルにロードされ、groups.htmlの2番目の関数はクリックイベントを2回発生させます。

それを回避する方法、または同じことを達成するためのより良い方法はありますか？

4

1 に答える 1

20

を使用するstopImmediatePropagation()と、イベントがページの DOM を介してバブリングするのを停止します。

// Index Page Onclick events

  $('body').on('click','.menuClass',function(e) {
    e.preventDefault();
    var menuid = $(this).attr('id');
    alert(menuid);        
  });

// click on groups html  >>  this page alert fires twice

$('body').on('click','.grpClass',function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var menuid = $(this).attr('id');
    alert(menuid);

});

これがどのように機能するかの例を次に示します: JSFIDDLE。をクリックtest1すると、バブリングが防止され、アラートが 1 つだけ表示されます。をクリックtest2すると、イベントは停止されず、2 つのアラートが表示されます。

于 2012-08-21T09:47:56.873 に答える