30

一部のイベントを停止しようとしていますが、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>
4

7 に答える 7

52

簡単に言えば、できないということです。

問題

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

泡立つイラスト
（出典：shog9.com）

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

解決

ここでの最良のオプション (投稿した内容からわかる限り) は、両方のクリック ハンドラーにライブ バインディングを使用することです。これが完了すると、 .MoreAppointmentsハンドラーreturn falseから、 .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);
});
于 2009-12-28T02:13:16.563 に答える
7

私はそのような種類のコードを使用しましたが、それは私のために機能しました：

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

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

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

于 2011-08-09T16:15:20.547 に答える
5

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

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

  AddApointment(this);
});

効くかも?

于 2009-12-28T01:27:14.440 に答える
3

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

if(event.target != this)return; // stop event bubbling for "live" event
于 2012-03-26T09:03:30.017 に答える
1

私が使う

e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)
于 2009-12-28T01:40:44.590 に答える
1

私は特定の状況でこれを使用しました。注: 常に適用できるとは限らないため、常に必要に応じて評価してください。

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()は、クリックしているリンクを停止して、スクロール位置をページの上部に移動することです。

于 2013-02-28T12:51:14.887 に答える