jkg*_*yti 8 javascript jquery events
我想创建一个通过点击任意位置触发的一次性事件.单击按钮即可创建此事件.我不希望在点击按钮时触发事件,只有任何后续点击(包括按钮).
所以说我有一些类似下面的HTML:
<body>
<div id="someparent">
<div id="btn"></div>
</div>
</body>
以下javascript(jquery):
$('#btn').click( function() {
$(document).one('click', function() {
console.log('triggered');
});
});
$('#someparent').click(function() {
// this must always be triggered
});
我想避免停止事件传播,但在上面的示例中,事件绑定到文档,然后事件冒泡,并触发事件.
修复此问题的一种方法似乎是将事件创建包装在超时中:
$('#btn').click( function() {
setTimeout(function() {
$(document).one('click', function() {
console.log('triggered');
});
}, 1);
});
$('#someparent').click(function() {
// this must always be triggered
});
现在,这很好用,但我想知道这是否安全.一些执行顺序的概念是否保证这一点总是有效,或者只是偶然的工作？我知道还有其他解决方案(.one()例如另一个嵌套事件),但我特意寻找setTimeout和事件传播如何互操作的答案.
以下小提琴显示两个div.第一个行为错误(文档事件立即触发).单击第二个div,然后在文档(白色区域)上的任何位置说明所需行为:
事件冒泡意味着,在事件触发最深的可能元素之后,它会以嵌套顺序触发父项.
来自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Adding_messages
添加消息
在Web浏览器中,只要事件发生并且附加了事件侦听器,就会添加消息.如果没有监听器,则该事件将丢失.因此,单击带有单击事件处理程序的元素将添加消息 - 与任何其他事件一样.
调用setTimeout将在作为第二个参数传递的时间之后向队列添加消息.如果队列中没有其他消息,则立即处理该消息; 但是,如果有消息,则setTimeout消息必须等待处理其他消息.因此,第二个参数表示最短时间而不是保证时间.
因此,您所拥有的行为并非偶然,您可以保证在处理超时后添加的消息之前,将处理队列中的消息.