ユーザーがJavascriptでボタンをクリックしたときにマウスカーソルの正確な位置を見つける方法は？

Question

このデータに基づいてdivの左上と左のpx番号を設定する必要があります。どのようにこれを行うに行くことがありますか？

基本的に、ユーザーがこの要素をクリックすると、私はコンテンツを表示/非表示するshowcontent機能を持っています。しかし、私はカーソルの位置を見つけることによってトップを設定する必要があります

function ShowContent(d) { 
    document.getElementById(d).style.display = "block"; 
} 

Answer 1

この例はjQueryのjavascriptライブラリに基づいています。

$("#button").click(function(e){ 
     alert("X is: "+e.pageX+" \n Y is:"+e.pageY); 
}); 

オンラインここにデモ：http://jsfiddle.net/pGdbD/1/

は、マウスがときあった場所あなたが見つけるために、イベントオブジェクトのevent.pageXとevent.pageYプロパティを使用することができ、ボタンのさまざまな部分で

Answer 2

をクリックしてみてくださいイベントが開催されました。たとえば：

document.getElementById('yourDiv').addEventListener('click', function(event) { 
    console.log('X: ' + event.pageX + ' Y: ' + event.pageY); 
}); 

明らかにあなたの実際のコードは、例えば、IE用のattachEventを使用して、より複雑になりますが、これはどのように行うのをお見せなければなりません。

---

編集ファンはかなり当然のことを思い出すと、pageX/Yは、Internet Explorerで設定されていません。以下は、jQueryのソースコードから適応され、この問題ラウンド動作します：

function(event) { 
    var x, y; 

    if (event.pageX == null && event.clientX != null) { 
     var doc = document.documentElement, 
      body = document.body; 

     x = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); 
     y = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); 
    } else { 
     x = event.pageX; 
     y = event.pageY; 
    } 

    console.log('X: ' + x + ' Y: ' + y); 
} 

Answer 3

あなたはjqueryのか、別のlibを使用しない場合、あなたはそれクロスブラウザ処理するために、このページhttp://www.quirksmode.org/js/events_properties.htmlを見てする必要があります。これには、次のプロパティが含まれます。Event.clientXまたはEvent.pageX

それ以外の場合、jqueryのイベントにはpageXプロパティとpageYプロパティがあります。

ほとんどの図書館には、これを行うためのものがあります。

EXT-コアは：Event.getPageX（）http://dev.sencha.com/deploy/dev/docs/source/EventManager.html#method-Ext.EventObject-getPageX

jqueryの：http://api.jquery.com/event.pageX/