Mouse Cursor Position

document.compatMode

Quirks mode[BACKCompat] : Standard-compliant mode is not switched on.
Strict mode[CSS1Compat] : Standard-compliant mode is switched on.

function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}

Test Sample

<html> <head> <script type=“text/javascript”> function open_win() { window.open(“./test/js/test_mouse_event_x_y.html”,“_blank”,“toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400”); } </script> </head>

<body> <a href=“#” onclick=“open_win()” style=“text-decoration:underline;color:#900B09”>What are the coordinates of the cursor?</a>

</body>

</html>

Change background color of a selected row

function TT_click(oR) {
 var oT = oR.parentNode.parentNode;　//Table node
 if(oT.targetRec == oR) {   //再度クリックすると色を消す
  oR.style.backgroundColor = '';
  oT.targetRec = false;
 } else {
  if(oT.targetRec)oT.targetRec.style.backgroundColor = '';
  oR.style.backgroundColor = oT.currentBackgroundColor;
  oT.targetRec = oR;
 }
}
 
function TT(Tid,SetColor) {
 var oT = document.getElementById(Tid);
 if(! oT)return;
 
 for(var i=0;i<oT.rows.length;i++) {
  oT.rows[i].onclick=function(){TT_click(this);};
 }
  oT.targetRec=false;
  oT.currentBackgroundColor=SetColor;
}

Code sample

<BODY bgcolor="#f9c58a">
<form name="f1">
 
＜テーブルをクリックすると行の色が変わるサンプル＞
 
<TABLE id="T1" cellspacing="0" width="180">
<tr><td>hoge</td><td>hoge</td></tr>
<tr><td>hoge</td><td>hoge</td></tr>
<tr><td>hoge</td><td>hoge</td></tr>
</TABLE>
<BR><BR>
 
<script type="text/javascript">
<!--
TT('T1','#65c9ef');// テーブルのIDをクリックした時の色
//-->
</script>

トレース: • event

目次

Mouse Cursor Position

Test Sample

Change background color of a selected row

Code sample

ナビゲーション

検索

ツールボックス

QR Code