摘要使用jquery.blockUI似乎隐藏/吞下/屏蔽按钮单击事件。
技术阶层

1. Backbone 和 puppet
2. backbone.radio
   1.底缐
   1.查询
3. jquery.blockUI
   (all最新版本）

应用程序

该应用程序由一个文本输入和一个按钮组成。

在 Backbone /牵线 puppet 术语方面，
1.具有2个区域的俯视图
1.作为文本输入的容器视图
1.页脚视图，其中包含按钮
1.容器视图由模型支持。
1.页脚有一个按钮，单击该按钮将发送一个backbone.radio事件。
1.在俯视图中拾取该事件。

当用户离开文本输入时，调用API（服务器/后端）。在示例中，Promise / setTimeout用于模拟调用。
在本示例中，按钮调用console.log。

代码

下面是JSFiddle Example on JSFiddle及其下面的Javascript代码

// ------------------------------------------------------------------
var Model = Backbone.Model.extend({

  defaults: {
    "SearchCriteria": {
      "Min": { "value": "abc123", "ReadOnly": true }
    }
  },

  async callBackend() {

    //$.blockUI(); //<----- uncomment this and the button click is swallowed

    await new Promise(resolve => setTimeout(resolve, 3000));

    $.unblockUI();
  }

});
// ------------------------------------------------------------------

// ------------------------------------------------------------------
var ContainerView = Marionette.View.extend({
  template: _.template('<div><label>Container</label></div><div><input id = "min" name = "min" type = "text"/></div>'),

  events: {
    'change': 'onChangeData',
  },

  async onChangeData(data) {
    console.log('start onChangeData');    
    await this.model.callBackend();
    this.render();
    console.log('end onChangeData');    
  }

});
// ------------------------------------------------------------------

// ------------------------------------------------------------------
var FooterView = Marionette.View.extend({
  template: _.template('<div><button class="btn-footer-test">Footer</button></div>'),

  events: {
    "click .btn-footer-test": () => {
      console.log('click test ...');
      Backbone.Radio.channel("maske").trigger("select:test");
    }
  },

});
// ------------------------------------------------------------------

// ------------------------------------------------------------------
var TopView = Marionette.View.extend({
  template: _.template("<div id='container'></div><div id='footer'></div>"),

  regions: {
    container: '#container',
    footer: '#footer'
  },

  events: {
    'change': 'onChangeData',
  },

  initialize() {
    this.listenTo(Backbone.Radio.channel("maske"), "select:test", this.onTest, this);
  },

  onRender() {
    this.showChildView('container', new ContainerView({
      model: new Model()
    }));
    this.showChildView('footer', new FooterView());
  },

  onChangeData(data) {
  },

  onTest() {
    //NOT called if jquery.blockUI present******

    console.log('onTest');
  }
});
// ------------------------------------------------------------------

$(document).ready(function () {
  console.log('Start');
  const topView = new TopView();

  topView.render();
  $('body').append(topView.$el);
});

使用

用户像这样使用应用程序。用户
1.更改文本输入
1.并直接单击按钮（无需先跳出字段！）

预期行为

1.对文本输入的改变触发改变事件。

1. jquery.blockUI
   1.异步呼叫
2. jquery解除封锁UI
   1.执行对该按钮的点击事件

实际行为

当jquery.blockUI函数存在时，按钮的click事件不会被执行。注解jquery.blockUI时，按钮的click事件发生，但是在await返回之前。

问题

1.我做错了什么？
1.为什么click事件会被吞掉？