Question

我要做的是在mouseenter事件上附加一个div，并将该新div的top属性设置为事件的鼠标位置。我得到的问题是当我进入鼠标靠近事件元素的边缘时（例如元素宽度的四分之一，元素宽度为60px），事件会随着mouseleave事件交替闪烁而导致闪烁影响。我只注意到FF的问题。如果我设置静态top属性（例如事件元素的高度），也不会出现问题。我已经尝试使用超时来解决这个问题。我不确定我在这里做错了什么，或者问题是FF。

关于如何防止这种行为的任何想法？请轻松，因为这是我的第一篇帖子：）

示例：

HTML

<div class="columnWrap">
  <div class="colDesc"></div>
  <div class="column col_hover col_gradient"></div>
  <div class="colVal"></div>
  <div style="display: none;" class="chart1_colPopup colPopup"></div>
</div>

我如何约束我的事件

$(document).ready(function(){

var colHoverTimer;
var popupOpen = false;

$('.column.col_hover').mouseenter(function(e){ 
    e.stopPropagation();
    if (popupOpen === false){
        popupOpen = true;
        var trigger = $(e.target).closest('.col_hover');
        colHoverTimer= setTimeout(function(){columnHover(e, trigger)}, 500);
    }
});

$('.column.col_hover').mouseleave(function(e){
        console.log('mouseout');
        clearTimeout(colHoverTimer);
        $('body > .colPopup').remove();
        popupOpen = false;
});
});

将讨论的元素附加到DOM的函数：

function columnHover(event, trigger){   
  var targetPopup = trigger.siblings('.colPopup');
  targetPopup = targetPopup.clone().appendTo('Body').css({'visibility' : 'hidden', 'display' : ''});

  var colOffset = trigger.offset();
  var popupWidth = targetPopup.width();
  var popupHeight = targetPopup.height();
  var colWrapPos = trigger.closest('.columnWrap').position();
  var containerWidth = trigger.closest('div#chartWrapper').width();

  var posX = (colWrapPos.left > (containerWidth / 2)) ? colOffset.left - popupWidth : colOffset.left + (trigger.width() / 2);
  var posY = event.pageY - popupHeight;
  //var posY = colOffset.top;

  targetPopup.css({'left' : posX, 'top' : posY});
  targetPopup.css('visibility', '');        
}

Answer 1

尝试var posY = event.pageY - popupHeight - 1;以确保弹出窗口与光标位置稍微偏离。

我认为问题是Firefox甚至允许像素位置的十进制值。这意味着弹出窗口正好在光标下面创建，这当然意味着你已经离开了.col_hover和mouseout fires，这意味着你回来了。冲洗并重复。

jQuery mouseenter，在JavaScript中mouseleave意外行为

1 个答案: