我们已经实现了一系列由 MouseEnter 事件触发的悬停卡。尽管为这些添加了超时,但即使只是触摸一毫秒,悬停卡仍然会显示。更具体地说,如果我滚动过去并且鼠标光标点击它,弹出窗口仍然会在半秒后出现。我希望能够滚动浏览项目而不会意外发生弹出窗口。
这是代码:
function onShowHoverCardHover(event) {
$timeout.cancel(timeoutShow);
$timeout.cancel(timeoutHide);
timeoutShow = $timeout(function() {
createHoverCard().then(function() {
$timeout(function() {
// alert('show timeout');
var _$hc = getHoverCard();
repositionHoverCard();
updateAlignments();
if (!isVisible) {
_$hc.addClass('show');
isVisible = true;
}
}.bind(this), 500);
}.bind(this));
}.bind(this), showTimeout);
}
我相信
一旦触发超时回调,您需要检查鼠标是否仍然悬停在卡上。
使用它来检查元素是否正在使用jQuery悬停:使用jQuery检测是否悬停在元素上
$timeout(function() {
// alert('show timeout');
var _$hc = getHoverCard();
repositionHoverCard();
updateAlignments();
// check that the card is not visible AND is being hovered
if (!isVisible && _$hc.is(':hover')) {
_$hc.addClass('show');
isVisible = true;
}
}.bind(this), 500);