如何使用JQuery在鼠标单击旁边放置div?

时间:2021-01-19 20:35:00

How do I position a div next to a mouse click using JQuery?

如何使用JQuery在鼠标单击旁边放置div?

Thanks

谢谢

2 个解决方案

#1


30  

You can try:

你可以试试:

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

After additional question was asked in the comment:

在评论中提出其他问题后:

$( "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)         
  });
});

#2


1  

Something like:

就像是:

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

The div's position should be set to absolute.

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

#1


30  

You can try:

你可以试试:

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

After additional question was asked in the comment:

在评论中提出其他问题后:

$( "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)         
  });
});

#2


1  

Something like:

就像是:

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

The div's position should be set to absolute.

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