0

用例：

如果用户单击其他一些对象、滚动或除了超时（120 秒）什么都不做，我有一个div#callout我想要的。hide()但是，如果用户单击其中的#callout对象或对象，则它不会执行该hide()操作。此外，如果有任何子元素（例如input获得焦点），则超时无效（假设人们正在打字）。

主意：

我计划通过扩展创建一个聚合事件Backbone.Events，这三个事件中的任何一个都会触发类似"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;
  }
)}

如果您需要重新设置超时，那么事件哈希将如下所示（而不是模糊事件， jQuery 中的focusout事件气泡）

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

UPD：为确保focusout将焦点移出Callout视图，您需要检查事件的relatedTarget是否位于视图内部$el。

于 2012-10-26T09:02:05.813 回答
0

所以基本上，用户必须div#callout在 120 秒内点击，否则它会隐藏。那么你只有2个案例：

  1. 用户在页面加载后 120 秒内点击隐藏之前的标注内部
  2. 用户忽略div#callout它，它会自动隐藏。

如果用户不与之交互，callout那么您无需担心。您唯一需要担心的情​​况是用户是否在callout.

因此，除非您要在内部拥有大量嵌套视图，div#callout否则不会有问题。

如果内部确实有许多嵌套视图div#callout，则可以reset hide通过某种继承或混合将事件附加到每个孩子。

于 2012-10-26T06:30:14.813 回答