event.stopPropagation() 无法在带有 jQuery 1.7 的 Chrome 中工作
由于某种原因,单击文档在 Chrome 中不起作用(未调用 closeQuickView)。
这些元素是通过 AJAX 加载的,因此需要有 .on() 操作(以前是 .live() ,现在已在 jQuery 1.7)
使用此处给出的示例:如何检测元素外部的点击?作为基础
$('html').on('click', '.poster:not(.active) .image-effect', function (event) {
var obj = $(this).parent();
// If there are no .close spans
if (obj.find('.close').length === 0) {
// Add the close element by javascript to remain semantic
obj.find('.quick-view').append('<span class="close">×</span>');
}
// Close any open Quick Views
closeQuickView();
// Add the active class (controls opacity)
obj.addClass('active');
// Fade in the Quick View
obj.find('.quick-view').fadeIn(200, 'easeInOutQuint');
event.preventDefault();
event.stopPropagation();
});
$('html').on('click', '.active', function () {
return false;
});
$('html').on('click', '.close', function () {
closeQuickView();
});
$('html').on('click', '.quick-view', function (event) {
event.stopPropagation();
});
// Close the QuickView with a button
$('html').on('click', function () {
closeQuickView();
});
function closeQuickView() {
$('.poster').removeClass('active');
$('.quick-view').fadeOut(200, 'easeInOutQuint');
}
我的标记如下:
<figure class="grid_2 box poster">
<a class="image-effect" href="#">
<img class="colour" src="path/to/image" />
<img class="bw" src="path/to/image" />
</a>
<div class="quick-view">
Content
</div>
</figure>
For some reason clicking the document isn't working in Chrome (the closeQuickView is not being called).
The elements are loaded via AJAX and so need to have .on() action (previously .live() which is now deprecated in jQuery 1.7)
Used the example given here: How do I detect a click outside an element? as a basis
$('html').on('click', '.poster:not(.active) .image-effect', function (event) {
var obj = $(this).parent();
// If there are no .close spans
if (obj.find('.close').length === 0) {
// Add the close element by javascript to remain semantic
obj.find('.quick-view').append('<span class="close">×</span>');
}
// Close any open Quick Views
closeQuickView();
// Add the active class (controls opacity)
obj.addClass('active');
// Fade in the Quick View
obj.find('.quick-view').fadeIn(200, 'easeInOutQuint');
event.preventDefault();
event.stopPropagation();
});
$('html').on('click', '.active', function () {
return false;
});
$('html').on('click', '.close', function () {
closeQuickView();
});
$('html').on('click', '.quick-view', function (event) {
event.stopPropagation();
});
// Close the QuickView with a button
$('html').on('click', function () {
closeQuickView();
});
function closeQuickView() {
$('.poster').removeClass('active');
$('.quick-view').fadeOut(200, 'easeInOutQuint');
}
My markup is as follows:
<figure class="grid_2 box poster">
<a class="image-effect" href="#">
<img class="colour" src="path/to/image" />
<img class="bw" src="path/to/image" />
</a>
<div class="quick-view">
Content
</div>
</figure>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
尝试
event.stopImmediatePropagation
参考文档
Try
event.stopImmediatePropagation
Refer documentation
jquery 1.6.4 也遇到同样的错误。使用 stopImmediatePropagation 解决。
jquery 1.6.4 suffer the same bug. Resolved using stopImmediatePropagation.