滚动事件发生时防止悬停在元素上

Question

我使用 backbone/marionette 构建了一个下拉小部件，您可以使用键盘在下拉列表中上下导航。我需要区分选中和突出显示，因此我将布尔值存储在列表项模型的 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 触发器，高亮显示发生了变化。我只是不知道在哪里可以添加代码来防止浏览器识别鼠标输入。我想为此添加自定义事件吗？这是我的大量工作，必须有一个更简单的解决方案。

Answer 1

设置事件聚合器

在 Backbone 中创建事件聚合器很简单，只需 extend 事件对象，

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

我们将事件聚合器 vent 附加到全局范围，以便任何人都可以收听。

如果您正在使用 Marionette，您可以在 Backbone.Wreqr 内置 Marionette 消息传递系统中使用内置聚合器（注意： Wreqr 将从 Marionette v.3 开始，使用新消息 API、Radio 进行切换，但我从一个很好的来源获得了更新经理应该将所有 Wreqr 个实例迁移到 Radio)。

创建事件聚合器是调用的问题，

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

现在为了解决您的问题，我们将使用事件聚合器来设置一个 pubsub 系统，您的项目的视图将在其中订阅一个事件，该事件将帮助他们对滚动做出正确的反应。管理滚动的视图将发布此事件。

注意：Backbone.Wreqr如果要创建独立的消息传递管道，也可以配备使用Channels。查看 docs.

正在订阅

那么让我们设置订阅。在item的视图中do

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

发布

我们刚刚订阅的事件将在 scrollTop 调用之前和之后发布，方法是在 vent 上触发事件。所以你会像这样重写最大限制检查器，

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

滚动事件发生时防止悬停在元素上

Prevent hover on an element when scrolling event happened

javascript

events

backbone.js

marionette

设置事件聚合器

正在订阅

发布

防止突出显示