jquery在鼠标位置设置div答案

【问题标题】：Jquery set div at mouse positionjquery在鼠标位置设置div
【发布时间】：2015-07-27 23:08:08
【问题描述】：

我想在我的鼠标下始终有一个 div，我想用这个 div 来显示工具提示。

这是我正在尝试使用的代码。但是这段代码给出了一个错误： " 无法读取未定义的属性 'pageX'"

我的问题是为什么 pageX 未定义，我该如何解决这个问题？

$( document ).ready(function() {

    AppentMouse(); //Setup div that is used for mouse icon

    window.setInterval(function(){
        SetMouse(); //Set div that is used for mouse icon at mouse location
    }, 5);
});

function AppentMouse(){
    $( 'Body' ).append( "<div id='Mouse'>Mouse</div>");
}
function SetMouse(){
var e = window.event || e; 

    var left  = e.pageX + "px";
    var top  = e.clientY  + "px";

    var div = document.getElementById('Mouse');

    div.style.left = left;
    div.style.top = top;
}

【问题讨论】：

标签： javascript jquery position tooltip mouse

【解决方案1】：

考虑到这是您的 html 代码：

<body>
    <div>Your content</div>
</body>

div 有这些样式：

div {
    position: absolute;
    border: solid 1px #fc0;
}

使用 jQuery，将mousemove 事件侦听器附加到文档，并使div 在每次移动时都更改top 和left 样式：

$(document).on('mousemove', function(e){
    $('div').css('top', e.pageY);
    $('div').css('left', e.pageX);
});

看到这个JSFiddle

编辑：

考虑到您的代码，变量e 是undefined。并且错误表明undefined 值没有pageX 属性。

那是因为您需要一个 mouse event（针对您的情况）来定义对象 event。该对象由我们在我提供的代码中添加的event listener 接收。

【讨论】：

【解决方案2】：

至于您的代码，您必须将事件绑定到 div。

一个简单的方法是不动态生成 div，只显示和隐藏它。（就像我的例子一样）。这也更快。

或者，每次生成 div 时，定义并从生成它的函数中触发设置鼠标事件。

提供另一种方法：

首先，HTML。在正文中的任意位置添加以下内容。

<div id="tooltip"></div>

现在是 CSS（添加更多使其看起来更漂亮）：

#tooltip {
position: absolute;
display: inline-block;
opacity: 0;
}

创建一个名为tips 的类，并将您希望为其提供工具提示的所有元素都属于该类。

然后是 jQuery：

//For every element in ".tips" have an attribute "tooltiptext" 
$('.tips').mouseenter(function(e) {
    $("#tooltip").css("left", e.pageX + 10);
    $("#tooltip").css("top", e.pageY+ 10);
    $("#tooltip").html($(this).attr("tooltiptext"));
    $("#tooltop").show();
});
$('.tips').mouseout(function() {
    $("#tooltip").hide();    
});

请告诉我这是否有效。

【讨论】：