2

我试图弄清楚当有人右键单击图像时如何让 DIV 显示在鼠标的位置。一个例子可以在这里找到。

我四处搜索，发现以下代码...

$('img').bind('contextmenu', function(e){
return false;
});

这当然会阻止右键单击。虽然我不知道如何让 DIV 出现在鼠标点击的位置。

请问我可以指出正确的方向吗？

谢谢！​</p>

4

2 回答 2

7

我整理了一个关于如何做到这一点的快速演示（在这里查看）。div 是绝对定位的，我们捕获contextmenu事件，在该事件上我们根据对象中的和键preventDefault()设置位置。divpageXpageYevent

JS 看起来像这样：

$('body').on('contextmenu', function(event) {
    event.preventDefault();
    $('div').css({
        'top': event.pageY,
        'left': event.pageX
    });
});​

CSS 看起来像这样：

body {
    width: 500px;
    height: 500px;
}

div {
    width: 100px;
    height: 100px;    
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
}​

我已经在最新的 Firefox 和 Chrome 以及 IE7 - IE9 中测试了该演示，并且它在所有这些中都有效。希望这可以帮助。

于 2012-09-19T21:03:23.090 回答
0

您可以使用传递给处理程序的事件对象的offsetX和属性，如下所示：offsetYcontextmenu

HTML：

<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" alt="click me, I'm a kitten!" id="picture" />

<div id="pictureCaption">Pretty picture of a kitten</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Javascript：

​$('#pictureCaption').hide();

$('#picture').contextmenu( function(e) {
    e.preventDefault();
    $('#pictureCaption').offset( {top: e.offsetY, left:e.offsetX} ).show();
})​​​​​​​​​​​​​​​;​​​​

jsFiddle在这里：http: //jsfiddle.net/HFC5g/

于 2012-09-19T21:08:01.463 回答