彙總模糊事件視圖

使用案例：彙總模糊事件視圖

我有一個div#callout，我想hide()，如果用戶要麼點擊其他一些物體，滾動或什麼都不做，但超時（ 120秒）。但是，如果用戶點擊#callout或其中的對象，則不會執行hide()操作。此外，如果有任何兒童元素（例如input）獲得焦點，則超時無效（假設人們正在鍵入）。

理念：

我打算通過擴展Backbone.Events任何這三個事件將觸發像"blur:callout"

挑戰產生聚集事件：

我想我可以做滾動檢測和超時，但我怎麼檢測點擊某處，但不是#callout？我不想爲所有其他視圖和子視圖添加觸發器事件，因爲可能有100個視圖和子視圖在不斷增長。

來源

2012-10-26 HP.

如果你有'div＃callout'視圖的引用，你可以嘗試觸發一個消息，該視圖將會監聽 –

正確，但是如果我有100個其他視圖或子視圖，那麼會觸發他們每個人都在'點擊'事件 –

嗯，我想知道tabindex是答案here..lol http://www.barryvan.com。au/2009/01/onfocus-and-onblur-for-divs-in-fx/ –

所以基本上，用戶必須在120秒內點擊div#callout，否則會隱藏。你只需要2案件則：

標註內用戶點擊頁面加載
用戶忽略div#callout後120秒內隱藏即之前，它會自動隱藏。

如果用戶沒有與callout互動，那麼你沒有什麼可擔心的。您唯一需要擔心的情況是用戶是否在callout內點擊。

所以，除非你要在div#callout內有大量的嵌套視圖，否則你沒有問題。

如果你在div#callout裏面有很多嵌套的視圖，你可以通過某種繼承或混合將一個reset hide事件附加到每個孩子。

來源

2012-10-26 06:30:14

啊你讓我想到。我只是修改了這個問題。基本上，如果孩子要點焦點，不要超時。 –

所以你需要在用戶與'callout'子元素交互時重置定時器？基本上，如果用戶與'callout'內的任何內容交互，你可以讓__always__可見嗎？ –

如果我有你的權利，那麼我會做這樣的事情：

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; 
    } 
)}

如果您需要設置超時當時事件哈希是這樣的（而不是模糊的事件，focusout事件冒泡jQuery中）

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

UPD：確保focusout把焦點移動出Callout來看，你需要檢查事件的relatedTarget不被內部視圖的$el。

來源

2012-10-26 09:02:05

超時很容易處理。我只是想知道如何檢測用戶是否在外面點擊其他東西。 –

然後我想你可能需要將這個超時功能提取到具有Backbone.Events mixin的構造函數的對象中。然後你將它傳遞給所有的觀點，讓他們相互溝通。我認爲它被稱爲中介模式。 –

彙總模糊事件視圖

回答

相關問題