javascript - jQuery:mouseup + position:absolute + show()。 IE 中的问题

Question

我正在尝试实现一个弹出窗口，当用户选择特定 <div> 中的某些文本时会出现该弹出窗口。 。工具提示是 <div>与 display: none和position: absolute CSS 属性位于页面底部。

在可选 div 的 mouseup 事件处理程序中，我正在执行以下操作:

$("#popup").css({
    top: e.pageY,
    left: e.pageX
}).show();

这是一个有效的 JS fiddle :http://jsfiddle.net/6r4Lrgmv/

它在 Chrome 和 Firefox 中工作正常，但 Internet Explorer(我在版本 9 和 11 上进行了测试)会选择页面上的文本直到底部。我究竟做错了什么？这个问题有解决办法吗？

Answer 1

我猜测的解释:当显示弹出窗口时，IE 认为您的鼠标光标实际上位于弹出窗口内。因此它选择页面末尾的文本。

我找到了两种可能的解决方案(使用 IE 11 测试):

• 将+1添加到弹出位置。这样弹出窗口就不会直接出现在鼠标光标下方。

  $("#popup").css({
      top: e.pageY + 1,
      left: e.pageX + 1
  }).show();
  

• 使用setTimeout。这样，事件完成后(在当前事件队列的末尾)就会显示弹出窗口。

  setTimeout(function() {
      $("#popup").css({
          top: e.pageY,
          left: e.pageX
      }).show();
  });