Question

我有一个Backbone视图，我附上了一些事件：

var View1 = Backbone.View.extend({

  initialize: function() {
      // ...
  },

   events: {
      "touchend .elem": "callback",
       // ...
    }

  render: function() {
      // ...
  }

});

现在，当我呈现View1时，首先呈现另一个视图（View2）并且其div覆盖View1个元素。 div具有以下CSS属性：

.overlay {
    background-color: rgba(0, 0, 0, 0.22) !important;
    z-index: 500;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

几秒后

View2消失。问题是，如果我在叠加层消失之前单击叠加层，则会触发叠加层下的事件，因此，在我的示例中，将调用callback函数。

我尝试通过这样做将假事件附加到View2：

var View2 = Backbone.View.extend({

  initialize: function() {
      // ...
  },

  events: {
      // ...
      "touchend .overlay":   "overlayCallback"
  },

  overlayCallback: function( event ) {
      if ( event ) {
          event.preventDefault();
          event.stopImmediatePropagation();
          event.stopPropagation();
      }
      return false;
  },

  render: function() {
      // ...
  }

});

但它并没有解决我的问题。

当用户点击View1重叠View2时，如何阻止div触发事件？

由于

Answer 1

假设View1调用View2，你可以这样做：

将View1作为参数添加到View2s initialize-method
然后，使用dojoConfig= { has: { "dojo-firebug": true }, isDebug: false, parseOnLoad: false, async: true }; - 方法中所述的方法 backbonejs - 在view2的initialize-method中禁用docs view1的事件暂时。
关闭View2，重新委托您在View1中使用undelegateEvents - 方法创建事件或创建一个 view1中的自定义方法，并从view2对view1的引用中调用它。

单击overlay div时防止触发后台事件

1 个答案: