2

誰かが画像を右クリックしたときに、マウスの位置に DIV を表示する方法を理解しようとしています。例はここにあります。

私は周りを検索し、次のコードを見つけました...

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

もちろん、これは右クリックを防ぎます。マウスクリックの場所にDIVを表示する方法はわかりませんが。

正しい方向に向けてもらえますか？

ありがとう！</p>

4

2 に答える 2

7

これを行う方法の簡単なデモ (ここで確認してください) をまとめました。contextmenudiv は絶対に配置され、イベントをキャプチャし、オブジェクトのとキーに基づいて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 に答える