摘要使用 jquery.blockUI 似乎隐藏/吞下/屏蔽按钮单击事件。
技术斯塔赫
- 脊梁和 Marionette
- Backbone .radio
- 下划线
- jquery
- jquery.blockUI
(所有最新版本)
应用程序
该应用程序由文本输入和按钮组成。
就 Backbone /Marionette 术语而言，有
- 有 2 个区域的俯 View
- 作为文本输入的容器 View
- 带有按钮的页脚 View
- 容器 View 由模型支持。
- 页脚有一个按钮，点击该按钮会发送一个backbone.radio事件。
- 此事件在顶 View 中拾取。
当用户离开文本输入时，将调用 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);
});
使用
用户像这样使用应用程序。用户
- 更改文本输入
- 并直接点击按钮(无需先按 Tab 键移出该字段!)
预期行为
- 文本输入的更改会触发更改事件。
- jquery.blockUI
- 异步调用
- jquery unblockUI
- 执行按钮的点击事件
实际行为
当 jquery.blockUI 函数存在时，不会执行按钮的单击事件。注释 jquery.blockUI 按钮单击事件发生，但在等待返回之前。
问题
- 我做错了什么？
- 为什么点击事件会被吞掉？
最佳答案
What am I doing wrong?
你的期望是错误的。 JavaScript 中没有隐式机制可以在异步事件完成后序列化另一个事件。您(开发人员)负责异步事件的同步。
Why is the click event swallowed?
Click事件火灾 when a mousedown and mouseup event occur on the same element 。这不是你的情况。事件顺序如下:
-
mousedown上<button> -
change上<input>;导致显示覆盖<div>通过blockUI -
mouseup叠加<div> -
click在触发的元素的最近公共(public)父元素上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>你将很难解决这个问题，因为在正常情况下 click事件不会在按钮上触发，因此我建议您重新考虑您的用户界面。 为什么当你使用异步/ promise 时甚至会阻止用户界面？它的发明是为了避免阻塞。
关于javascript - 为什么 jquery.blockUI 吞掉 onClick 事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57116105/