Rav*_*ous 6 javascript jquery event-bubbling event-delegation jquery-ui-datepicker
我试图阻止特定的点击事件从冒泡到文档根,结果关闭了我的一个弹出窗口.我需要停止冒泡活动,body或者html是我唯一可以拦截并阻止它的选项.
动态生成日期选择器弹出窗口,因此我无法在.ui-icon元素上使用直接事件,因此我在元素上注册了一个委托事件body以阻止它冒泡.
(function ($) {
$(function () {
$('body').on('click', '.ui-icon', function (e) {
e.stopPropagation();
});
});
})(jQuery);
令人惊讶的是,将直接事件注册到body元素并检查事件的目标就可以了.
(function ($) {
$(function () {
$('body').on('click', function (e) {
if ($(e.target).is('.ui-icon')) {
e.stopPropagation();
}
});
});
})(jQuery);
我真的很茫然,为什么前一个不适用于后者,两者都应该做同样的事情.我错过了什么？它可能与jQuery datepicker在事件到达正文之前重组(其整个内容块在导航上重建)有关(但它没有意义)？
下面添加了该问题的代码段.我只想让箭头(datepicker导航)停止冒泡到文档/根级别(关闭我的弹出窗口),并且因为datepicker被附加到body,唯一可用的拦截点是body/html.
$(function() {
let popup = $('#some-popup').addClass('visible');
let input = $('#some-date');
let toggler = $('#toggler');
// binding popup
toggler.on('click', function(e) {
e.stopPropagation();
popup.toggleClass('visible');
});
// initializing jQuery UI datepicker
input.datepicker();
// closing popup on document clicks other than popup itself
$(document).on('click', function(e) {
let target = $(e.target);
if (target.is('.ui-icon, .ui-datepicker-prev, .ui-datepicker-next')) {
console.warn('shouldn\'t have reached this, got: ' + target.attr('class'));
}
if (!(target.is('#some-popup'))) {
popup.removeClass('visible');
}
});
// trying to prevent click from reaching document
$('body').on('click', '.ui-icon, .ui-datepicker-prev, .ui-datepicker-next', function(e) {
e.stopPropagation();
})
});#some-popup {
padding: 15px 25px;
background: #000;
color: #fff;
display: none;
max-width: 200px;
}
#some-popup.visible {
display: block;
}
#toggler {
margin-bottom: 10px;
}<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="some-popup">
This is the popup
</div>
<button type="button" id="toggler">Show/Hide Popup</button>
<form>
<label for="some-date">The Date-Picker</label>
<input id="some-date" onclick="event.stopPropagation();" />
</form>
</body>委托事件不会触发，因为当您单击箭头时，首先会触发箭头按钮的单击事件，其中 jquery-ui-datepicker 从元素中删除整个日历元素body并生成上个月/下个月的新日历。
您可以通过检查元素是否具有任何父<body>标签（即通过检查 的长度）来验证该元素是否被删除closest('body')。
$('body').on('click', function (e) {
if ($(e.target).is('.ui-icon')) {
console.log($(e.target).closest('body').length);
// Prints 0 i.e this element is not a child of <body>
}
});
要触发委托事件，目标元素必须是事件绑定元素的子元素，否则 jQuery 不会触发该事件。下面的 Demo 证实了这一点。
$('body').on('click', function (e) {
if ($(e.target).is('.ui-icon')) {
console.log($(e.target).closest('body').length);
// Prints 0 i.e this element is not a child of <body>
}
});
$(function() {
$('.a').on('click', function() {
console.log('Direct Event');
})
$('.a').on('click', '.b,.c', function(e) {
console.log('Delegate Event');
})
$('.b').on('click', function() {
console.log('datepicker arrow event');
if($('input').is(':checked')) $(this).remove();
})
});.a {
padding: 20px;
background: #ffc55a;
text-align: center;
}
.b {
margin-top: 5px;
padding: 5px;
background: #7ddbff;
}| 归档时间： |
|
| 查看次数： |
502 次 |
| 最近记录： |