web-dev-qa-db-ja.com

jquery liveでイベントバブリングを停止するにはどうすればよいですか？

一部のイベントを停止しようとしていますが、stopPropagationが「ライブ」で機能しないため、どうすればよいかわかりません。私は彼らのサイトでこれを見つけました。

ライブイベントは従来の方法でバブルせず、stopPropagationまたはstopImmediatePropagationを使用して停止することはできません。たとえば、2つのクリックイベントの場合を考えてみましょう。1つは「li」にバインドされ、もう1つは「lia」にバインドされています。内側のアンカーをクリックすると、両方のイベントがトリガーされます。これは、$（ "li"）。bind（ "click"、fn）;の場合に発生します。バインドされているのは、実際には「クリックイベントがLI要素で発生するたびに（またはLI要素内で）このクリックイベントをトリガーする」ということです。ライブイベントのそれ以上の処理を停止するには、fnはfalseを返す必要があります

Fnはfalseを返さなければならないので、私がやろうとしたこと

 $('.MoreAppointments').live('click', function(e) {
   alert("Hi");
   return false;
 });

しかし、それは機能しなかったので、falseを返す方法がわかりません。

更新

ここにいくつかの詳細があります。

テーブルセルがあり、クリックイベントをそれにバインドします。

 $('#CalendarBody .DateBox').click(function(e)
    {
        AddApointment(this);
    });

したがって、AddApointmentはUIダイアログボックスを作成するだけです。

これで、ライブコード（MoreAppointments）はこのテーブルセルに配置され、基本的にアンカータグになります。したがって、アンカータグをクリックすると、最初に上記のコードに移動します（addApointment-そのイベントを最初に実行します）が、ダイアログボックスを起動せず、代わりに（MoreAppointment）イベントに直接移動してそのコードを実行します。そのコードが実行されると、「addApointment」からダイアログボックスが起動します。

アップデート2

これがhtmlの一部です。テーブル全体が少し大きく、すべてのセルが同じデータで繰り返されるため、テーブル全体をコピーしませんでした。必要に応じて投稿します。

 <td id="c_12012009" class="DateBox">
        <div class="DateLabel">
            1</div>
        <div class="appointmentContainer">
            <a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a>
        </div>
        <div class="appointmentOverflowContainer">
            <div>
                <a class="MoreAppointments">+1 More</a></div>
        </div>
    </td>
javascriptjquerydomevent-delegation
30
chobo2

簡単に言うと、できません。

問題

通常、内部要素のハンドラーはfirstと呼ばれるため、外部要素のイベントハンドラーへのイベントの「バブリング」を停止できます。ただし、jQueryの「ライブイベント」は、目的のイベントのプロキシハンドラーをドキュメント要素にアタッチし、イベントがドキュメントをバブルアップした後に適切なユーザー定義ハンドラーを呼び出すことで機能します。

Bubbling illustration
（出典： shog9.com ）

これにより、一般に「ライブ」バインディングはイベントをバインドするかなり効率的な手段になりますが、2つの大きな副作用があります。1つは、内部要素にアタッチされたイベントハンドラーが、「ライブ」イベントがそれ自体またはその子に対して発生するのを防ぐことができることです。次に、「ライブ」イベントハンドラーは、ドキュメントの子に直接アタッチされているイベントハンドラーの起動を防ぐことはできません。それ以上の処理を停止することはできますが、すでに発生した処理については何もできません...そして、ライブイベントが発生するまでに、子に直接アタッチされたハンドラーが既に呼び出されています。

解決

ここでの最善のオプション（あなたが投稿した内容からわかる限り）は、両方のクリックハンドラーにライブバインディングを使用することです。それが完了すると、次のことができるようになりますreturn false。MoreAppointmentsハンドラーから、。DateBoxハンドラーが呼び出されないようにします。

例：

$('.MoreAppointments').live('click', function(e) 
{
  alert("Hi");
  return false; // prevent additional live handlers from firing
});

// use live binding to allow the above handler to preempt
$('#CalendarBody .DateBox').live('click', function(e)
{
   AddApointment(this);
});
52
Shog9

私はそのような種類のコードを使用しました、そしてそれは私のために働きました：

$('#some-link').live('click', function(e) {
    alert("Link clicked 1");
    e.stopImmediatePropagation();
});

$('#some-link').live('click', function(e) {
    alert("Link clicked 2");    
});

したがって、JQueryはライブイベントでstopImmediatePropagationをサポートしているように思われます

7
Andrey Zavarin

たぶん、クリックイベントがa要素で発生しなかったことを確認できます。

$('#CalendarBody .DateBox').click(function(e) {
  // if the event target is an <a> don't process:
  if ($(e.target).is('a')) return;

  AddApointment(this);
});

うまくいくかもしれませんか？

5
gnarf

私はこれを使用しています：

if(event.target != this)return; // stop event bubbling for "live" event
2
RainChen

私はこれを特定の状況で使用しました。注：常に適用できるとは限らないため、いつものようにニーズを評価してください。

html：

_<a href="#" className="my-class-name">Click me</a>
_

js（ライブイベントハンドラー内）：

_if(e.target.className == 'my-class-name') {
    e.preventDefault();
    // do something you want to do...
}
_

このように、私のライブイベントは、特定の要素タイプ/クラス名属性がクリックされたときにのみ「実行」されます。

ここでのe.preventDefault()は、クリックしているリンクを停止して、スクロール位置をページの上部に移動します。

1
Dave

私が使う

e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)
1
shinkou
Simply use **"on"** function to bind click event of child as well as parent element.

Example :  $("#content-container").on("click","a.childElement",function(e){
                   alert("child clicked");
                   e.stopPropagation() ; 
                }); 

                $("#content-container").on("click","div.parentElement",function(e){
                  alert("parent clicked");
                }); 
( where content-container is the outer div containing both parent as well as child elements. )

        Here only "child clicked" alert will occur.

    Thanks.
0
Umesh K.