如何使用JQuery将一个div定位在鼠标点击的旁边？

Question

如何使用 JQuery 技术将 div 定位在鼠标点击的旁边？

谢谢。

- Nasir

---

你能再具体一点吗？ - XstreamINsanity

@XstreamINsanity ...好的，我有一个表格，当你点击某个单元格时，它会将某些内容加载到一个 DIV 中。我想做的是在我刚刚点击的地方显示这个 DIV。如果这样说不清楚，请告诉我。 - Nasir

你想在点击 DIV 时显示鼠标指针位置，还是执行某个函数？ - PPShein

所以你想用已经创建的DIV标签填充单元格？这个DIV已经嵌套在页面上的其他位置还是只在代码中？ - XstreamINsanity

@Nasir 你想使用 div 创建上下文菜单吗？我也在尝试解决同样的问题。 - Anderson Green

@Nasir 如果你想使用 div 作为上下文菜单，你可以参考这里的问题：https://dev59.com/nW855IYBdhLWcg3wKxDc - Anderson Green

Answer 1

你可以尝试：

$( "td").click( function(event) {
  $("#divId").css( {position:"absolute", top:event.pageY, left: event.pageX});
});

在评论中提出了额外的问题：

$( "td").click( function(event) {
  var div = $("#divId");
  div.css( {
      position:"absolute", 
      top:event.pageY, 
      left: event.pageX});

  var delayTimer = setTimeout( function( ) {
        $that.fadeIn( "slow");
     }, 100);

  div.mouseover( function( event) {
     if (delayTimer)
         clearTimeout( delayTimer);
  }).mouseout( function(){
     if (delayTimer)
         clearTimeout( delayTimer);
     var $that = $(this);
     delayTimer = setTimeout( function( ) {
        $that.fadeOut( "slow");
     }, 500)         
  });
});

- Artem Barger

---

非常感谢，它起作用了...你知道我怎么能阻止 DIV 显示在我点击的表格之外吗？ - Nasir

иҝҷжҳҜжҲ‘иҖғиҷ‘зҡ„жҰӮеҝөпјҡеҰӮжһң$('#DayInfo')еңЁ$('#holiday-planner-table')д№ӢеӨ–пјҢеҲҷпјҡдҪҝз”Ёиҙҹеқҗж ҮжҳҫзӨә$('#DayInfo')еҗҰеҲҷпјҢжү§иЎҢжӮЁзҡ„д»Јз Ғ - Nasir

你能否在jsfiddle上发布一个演示此示例的demo？拥有这个脚本的工作演示将非常有用。 - Anderson Green

这里有一个 JSFIDDLE，供需要的人使用 ------------->JSFIDDLE - - - - - -> http://jsfiddle.net/pratik24/aFACA/ - patz

无法与带有滚动条的长页面一起使用。我使用了 position:fixed 来显示内容。 - Max

Answer 2

像这样的：

$('#cell').bind('click',
    function(e){
        $('#div').css('left',e.pageX + 'px' );
        $('#div').css('top',e.pageY + 'px' ); });

的定位应该设置为绝对定位。

- A. M.