Question

我正在试图找出当有人右键点击图像时，如何在鼠标位置显示DIV。可以找到一个示例here。

我搜索了一下，发现了以下代码......

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

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

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

谢谢！

Answer 1

我已经汇总了一个如何做到这一点的快速演示（check it out here）。 div是绝对定位的，我们会捕获contextmenu事件，我们会preventDefault()，并根据div和pageX键设置pageY的位置在event对象中。

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中测试了这个演示，并且它已经在所有这些中都有效。希望这会有所帮助。

Answer 2

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

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/

右键单击图像显示DIV

2 个答案: