腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么jquery.blockUI要吞下onClick事件？

问为什么jquery.blockUI要吞下onClick事件？
EN

Stack Overflow用户

提问于 2019-07-19 08:06:26

回答 1查看 747关注 0票数 2

摘要使用jquery.blockUI似乎隐藏/吞下/掩蔽按钮单击事件。

Tech

脊骨和木偶
backbone.radio
下划线
jquery
jquery.blockUI

(所有最新版本)

The App

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

就主干/木偶术语而言，有

有两个区域的顶层视图
作为文本输入的容器视图
页脚视图，其中有按钮
容器视图由模型支持。
页脚有一个按钮，单击按钮会发送一个backbone.radio事件。
在顶部视图中可以看到此事件。

当用户离开文本输入时，会调用一个API (server /后端)。在这个例子中，使用了一个the / setTimeout来模拟调用。

在示例中，按钮调用console.log。

码

下面是JSFiddle 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. jquery.blockUI
2. 异步调用
3. jquery unblockUI

将执行按钮的单击事件。

实际行为

当jquery.blockUI函数出现时，不执行按钮的单击事件。注释jquery.blockUI按钮单击事件发生，但是在等待返回之前。

问题

我做错了什么？
为什么单击事件被吞没？

marionette

jquery-blockui

javascript

backbone.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-19 09:51:16

我做错了什么？

你的期望是错的。JavaScript中没有一个隐式机制可以一个接一个地序列化异步事件。您(开发人员)负责异步事件的同步。

为什么单击事件被吞没？

Click事件触发当一个mousedown和mouseup事件发生在同一个元素上时。这不是你的案子。事件的顺序如下：

mousedown on <button>
change on <input>；通过blockUI显示覆盖<div>的原因
覆盖<div>上的<div>
click对触发mousedown和mouseup (即<body> )的元素的最接近的公共父元素

从技术上讲，在输入更改后单击按钮似乎是不可能的，因为覆盖显示在mouseup之前，但是有一种方法。如果在显示覆盖时单击并按住鼠标按钮，然后发布，click事件将在该按钮上触发，但这并不是您想要的。

试着玩这个片段。它记录每个mousedown、mouseup、click和change事件。它首先在change上注册异步<input>事件处理程序，然后显示一个覆盖，然后休眠3秒，最后隐藏覆盖。你可以根据你按下按钮的时间来观察不同的行为。

更改输入文本，然后快速单击按钮

button.mousedown input.change button.mouseup button.click

更改输入文本，单击按钮并保持1秒，然后释放。

button.mousedown input.change div.mouseup body.click

更改输入文本，单击按钮并保持4秒(直到覆盖消失)，然后释放。

button.mousedown input.change button.mouseup button.click

$(document).on('mousedown mouseup click change', e => {
  console.log(e.target.tagName.toLowerCase() + '.' + e.type);
});

$('input').change(async _ => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  const $div = $('<div style="position:fixed; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:999">').appendTo('body');
  await new Promise(resolve => setTimeout(resolve, 3000));
  $div.remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="type something, then click the button" style="width:250px">
<button>Button</button>