0

使用事例：

ユーザーが他のオブジェクトをクリックするか、スクロールするか、タイムアウト（120秒）以外の何もしない場合に必要なものがありますdiv#callout。hide()ただし、ユーザーがクリックし#calloutたり、その中のオブジェクトをクリックしたりしても、アクションは実行されませんhide()。また、フォーカスを取得したなどの子要素がある場合input、タイムアウトは効果的ではありません（人々が入力していると仮定します）。

アイディア：

拡張して集約イベントを作成することを計画しています。Backbone.Eventsこれらの3つのイベントのいずれかが、次のようなトリガーになります。"blur:callout"

課題：

スクロールの検出とタイムアウトはできると思いますが、どこかでクリックを検出するにはどうすればよい#calloutですか？他のすべてのビューとサブビューにトリガーイベントを追加したくないのは、それらが100個あり、成長している可能性があるためです。

4

2 に答える 2

0

私があなたを正しければ、私は次のようなことをします：

var Callout = Backbone.View.extend({

  events: {
    "click": "clearTimeout" // clear timeout if clicked inside
  },

  render: function() {
    // render and then
    this.setTimeout();
    return this;
  },

  setTimeout: function() {
    var self = this;
    if (!this.timeout) {
      this.timeout = setTimeout(function() {self.hide();}, 120 * 1000);
    }
    return this;
  },

  clearTimeout: function(){
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
    return this;
  },

  hide: function() {
    this.$el.hide();
    return this;
  }
)}

タイムアウトを元に戻す必要がある場合、イベント ハッシュは次のようになります (blur イベントの代わりに、jQuery のfocusoutイベント バブル)。

events: {
  "focusout": "setTimeout",
  "focusin": "clearTimeout"
}

UPD:focusoutフォーカスがビューの外に移動するようにするには、イベントのrelatedTargetがビューの 内にないことCalloutを確認する必要があります。$el

于 2012-10-26T09:02:05.813 に答える
0

基本的に、ユーザーはdiv#callout120 秒以内にクリックする必要があります。そうしないと、非表示になります。その場合、2 つのケースしかありません。

  1. ユーザーが吹き出しが非表示になる前に、つまりページが読み込まれてから 120 秒以内に吹き出し内をクリックした
  2. ユーザーは を無視し、div#callout自動的に非表示になります。

ユーザーが と対話しない場合は、callout心配する必要はありません。心配する必要がある唯一のケースは、ユーザーが 内をクリックするかどうかcalloutです。

そのため、内部に多数のネストされたビューdiv#calloutを持たない限り、問題はありません。

内部にネストされたビューが多数ある場合は、何らかの継承または mixin を介して各子div#calloutにイベントをアタッチできます。reset hide

于 2012-10-26T06:30:14.813 に答える