如何使用 JQuery 在鼠标单击旁边定位 div？答案

【问题标题】：How do I position a div next to a mouse click using JQuery?如何使用 JQuery 在鼠标单击旁边定位 div？
【发布时间】：2010-08-19 11:26:37
【问题描述】：

如何使用 JQuery 在鼠标单击旁边定位 div？

谢谢

【问题讨论】：

你能补充一点细节吗？
@XstreamINsanity ...好的，我有一个表格，当您单击某个单元格时，它会将某些内容加载到 DIV 中。我想要做的是在我刚刚点击的地方显示这个 DIV。让我知道这是否有意义？
你想在点击DIV的地方显示鼠标指针的位置还是在点击DIV的时候执行功能？
所以你想用你已经创建的 DIV 标签填充单元格吗？这个 DIV 是已经嵌套在页面的其他地方还是只是在代码中？
@Nasir 您想使用 div 创建上下文菜单吗？我正在尝试自己解决同样的问题。

标签： javascript jquery

【解决方案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)         
  });
});

【讨论】：

非常感谢它的工作...你知道如何阻止 DIV 从我点击的表格中显示出来吗？
这是我正在考虑的概念： if($('#DayInfo'). is outside of $('#holiday-planner-table')) { display $('#DayInfo' ) 负坐标 } else{ 做你的代码 }
考虑打开新线程，用新问题描述您的其他问题。
你能为这个例子发布一个 jsfiddle 演示吗？有这个脚本的工作演示会很有用。
这里有一个 jsfiddle 供需要的人使用 -------------> JSFIDDLE - - - - - -> jsfiddle.net/pratik24/aFACA

【解决方案2】：

类似：

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

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

【讨论】：