防止后台事件的点击叠加DIV

  • Z时代
  • 2024-01-10
  • 分类：问答

时触发我有一个Backbone观点，我已经附加了一些事件，以它：防止后台事件的点击叠加DIV

var View1 = Backbone.View.extend({ 
    initialize: function() { 
     // ... 
    }, 
    events: { 
     "touchend .elem": "callback", 
     // ... 
    } 
    render: function() { 
     // ... 
    } 
});

现在，当我渲染View1另一个视图（View2）呈现第一，这有覆盖View1元素的div。 这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？

感谢

回答：

假设视图1调用视图2，你可以做到这一点，如：

  1. 添加您的视图1作为参数传递给View2s初始化法

  2. 然后，用undelegateEvents - 一种方法，在规定 backbonejs- docs在view2的初始化方法中暂时禁用 view1的事件。

  3. 关闭View2，使用delegateEvents重新授权 您的活动 - View1中的方法或在view1中创建 自定义方法，并将其从view2的引用调用到view1。

以上是 防止后台事件的点击叠加DIV 的全部内容， 来源链接： utcz.com/qa/257593.html

回到顶部