防止在發生滾動事件時將鼠標懸停在元素上

Question

我使用主干/牽線木偶構建了一個下拉小部件，可讓您使用鍵盤在下拉列表中上下導航。 我需要區分選擇和突出顯示，因此我將布爾值存儲在列表項模型的isSelected和isHighlighted中。 只要將項目懸停，isHighlighted就會更改為true。

這是我的問題，我將下拉列表設置為具有maxItem，因此當下拉列表中的項目過多時，我將顯示一個滾動條，以便人們可以滾動查看更多列表項。 當我使用鍵盤導航來導航通過該maxItem限制時，我需要設置動畫和scrollTop一定的距離，以便高亮顯示在視圖中。 問題是，如果我恰好將鼠標放在下拉列表中，並且發生了這種滾動，它將在鼠標指針所在的項目上觸發mouseenter事件。 然后，它將懸停的元素的isHighlighted更改為true。 這意味着突出顯示的項目將返回上一級，當我使用鍵盤再次向下導航時，它將從頂部向下而不是從之前的位置繼續。

無論如何，滾動事件觸發時，我是否可以阻止mouseenter事件？

嘗試包含所有相關代碼，希望對您有所幫助：

onKeyUp: function (event) {
    var key = event.which;

    switch (key) {
        case 38: // UP
            this.onUpArrow();
            break;
        case 40: // DOWN
            this.onDownArrow();
            break;
        default:
            // default method
    }
},
onDownArrow: function () {
    if (!this.isDropdownOpen()) {
        this.openDropdown();
    } else {
        this.dropdown.highlightNext();
        this.dropdown.scroll();
    }
},

在另一個文件中，我有

events: {
    'mouseenter': 'onMouseEnter'
},
onMouseEnter: function (event) {
    this.triggerMethod('dropdown:option:mouseenter', {
        event: event,
        view: this,
        model: this.model
    });
},

在另一個文件中，我有

onDropdownOptionMouseenter: function () {
    var data = _.last(arguments),
        event = data.event,
        view = data.view;
    view.highlight();
}

此時，發生了滾動，並且已經觸發了mouseenter觸發器，並且突出顯示發生了變化。 我只是不知道可以在哪里添加代碼以防止瀏覽器識別出mouseenter。 我是否應該為此添加自定義事件？ imo要做很多工作，必須有一個更簡單的解決方案。

Answer 1

設置事件聚合器

在Backbone中創建事件聚合器很簡單，只需extend events對象，

window.vent = _.extend({}, Backbone.Events);

我們將事件聚合器vent附加到全局范圍，以便任何人都可以收聽。

如果您使用的是Marionette，則可以在Backbone.Wreqr使用內置的聚合器Wreqr內置的Marionette消息傳遞系統（ 注意： Wreqr將從新的消息傳遞API Radio開始，從Marionette v.3開始，但我有一個很好的消息來源，即更新管理器應將所有Wreqr實例遷移到Radio ）。

創建事件聚合器只需調用即可，

window.vent = new Backbone.Wreqr.EventAggregator();

現在，為了解決您的問題，我們將使用事件聚合器來設置pubsub系統，在該系統中，您項目的視圖將訂閱一個事件，該事件將幫助他們對滾動做出正確的反應。 管理滾動的視圖將發布此事件。

注意：如果要創建獨立的消息傳遞管道，也可以使Backbone.Wreqr能夠使用Channels 。 查看文檔 。

訂閱

因此，讓我們設置訂閱。 在項目視圖中

initialize: function ()  {
  this.listenTo(vent, "dropdown:before:scroll", function() {
    this.isScrolling = true;
  }
  this.listenTo(vent, "dropdown:end:scroll", function() {
    this.isScrolling = false;
  }
}

出版

通過在vent上觸發事件，我們剛剛訂閱的事件將在scrollTop調用之前和之后發布。 因此，您需要像這樣重寫maxlimit檢查器，

if (currItem > maxItem) {
  vent.trigger("dropdown:before:scroll");
  someElement.scrollTop();
  vent.trigger("dropdown:end:scroll");
}

監聽這些事件的項目將知道您正在滾動，因為觸發事件是同步的，並且將以正確的順序觸發。

防止高光

最后，既然您正在發布scrollTop事件，並且您的項目正在監聽它，那么請確保遇到mouseenter的項目知道何時不突出顯示。

onMouseEnter: function (event) {
  if (!this.isScrolling) {
    this.triggerMethod('dropdown:option:mouseenter', {
        event: event,
        view: this,
        model: this.model
    });
  }
},