问题
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>
回答1:
Try event.stopImmediatePropagation
Refer documentation
回答2:
jquery 1.6.4 suffer the same bug. Resolved using stopImmediatePropagation.
来源:https://stackoverflow.com/questions/8021846/event-stoppropagation-not-working-in-chrome-with-jquery-1-7