Javascript 使用从所有其他主干视图单击并滚动的聚合模糊事件

用例：

我有一个

div#callout

，如果用户单击其他对象、滚动或除了超时（120秒）什么都不做，我想

hide（）

它。但是，如果用户单击

#callout

或其中的对象，则不会执行

hide（）

操作。此外，如果任何子元素（如

input

获得焦点，则超时无效（假设有人在键入）

创意：

我计划通过扩展

主干来创建聚合事件。事件

，这三个事件中的任何一个都会触发类似

“blur:callout”

挑战：

---

我想我可以进行滚动检测和超时，但是如何检测某个地方的点击，而不是

#callout

？我不想为所有其他视图和子视图添加触发器事件，因为可能有100个视图和子视图正在增长。

因此，基本上，用户必须在120秒内单击

div#callout

，否则它将隐藏。您只有两个案例：

用户在调出隐藏之前（即页面加载后120秒内）在调出内部单击

用户忽略

div#callout

，它会自动隐藏

如果用户不与调用进行交互，则您无需担心。您需要担心的唯一情况是用户是否在

标注

中单击

因此，除非在

div#callout

中有大量嵌套视图，否则不会有问题

---

如果在

div#callout

中有许多嵌套视图，则可以通过某种继承或混合将

reset hide

事件附加到每个子级。

如果我没有弄错，那么我会这样做：

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中的模糊事件、事件气泡）

---

UPD：为了确保

focusout

将焦点移出

Callout

视图，您需要检查事件是否不在视图的

$el

内，如果您有对

div#Callout

视图的引用，您可以尝试触发该视图将正在侦听的消息，但是，如果我有100个其他视图或子视图，那么在

点击
事件时，它们中的每一个都会触发很多。嗯，我想知道tabindex是这里的答案。哈哈，你可能想得太多了：）看看我的答案是否有意义，或者可能我错过了这里的上下文啊，你让我想的。我只是修改了这个问题。基本上，如果子元素在焦点上，则没有超时。因此，每当用户与
callout
子元素交互时，您需要重置计时器？基本上，如果用户与
callout
中的任何内容进行交互，您能让它始终可见吗？超时很容易处理。我只是想知道如何检测用户是否单击了外部的其他东西。然后我认为您可能需要将此超时功能提取到具有主干.Events mixin构造函数的对象中。然后将其传递给所有视图，以允许它们相互通信。我认为这就是所谓的中介模式。
events: {
  "focusout": "setTimeout",
  "focusin": "clearTimeout"
}