�@Ajax�ł̓I�u�W�F�N�g���h���b�O������I�u�W�F�N�g�T�C�Y��ύX�����肷�邱�Ƃ�����܂��B���̂悤�ȏꍇ�A�}�E�X�̍��W�l���擾����̂͏d�v�Ȃ��Ƃł��B�������A�}�E�X���W�̎擾�̓u���E�U���ƂɈقȂ��Ă���̂�����ł��B�ȉ��̃X�N���v�g��Internet Explorer�ȊO�ł̃}�E�X���W�̕\�����s�����̂ł��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>�}�E�X���W�\���e�X�g�iIE�ȊO�j</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
window.onmousemove = getMouseXY;
function getMouseXY(evt)
{
x = evt.x;
y = evt.y;
document.getElementById("result1").innerHTML = "(x,y) = "+x + ", "+y;
x = evt.pageX;
y = evt.pageY;
document.getElementById("result2").innerHTML = "(pageX,pageY) = "+x + ", "+y;
x = evt.layerX;
y = evt.layerY;
document.getElementById("result3").innerHTML = "(layerX,layerY) = "+x + ", "+y;
x = evt.clientX;
y = evt.clientY;
document.getElementById("result4").innerHTML = "(clientX,clientY) = "+x + ", "+y;
x = evt.screenX;
y = evt.screenY;
document.getElementById("result5").innerHTML = "(screenX,screenY) = "+x + ", "+y;
x = window.pageXOffset;
y = window.pageYOffset;
document.getElementById("result6").innerHTML = "(pageXOffset,pageYOffset) = "+x + ", "+y;
}
// --></script>
</head>
<body>
<h1>�}�E�X���W�\���e�X�g�iIE�ȊO�j</h1>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></div>
<div id="result6"></div>
<div id="testbox">test box</div>
</body>
</html>
�@�ȉ���Internet Explorer�œ��삷��X�N���v�g�ł��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>�}�E�X���W�\���e�X�g�iFirefox�ȊO�j</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
window.document.onmousemove = getMouseXY;
function getMouseXY()
{
x = event.x;
y = event.y;
document.getElementById("result1").innerHTML = "(x,y) = "+x + ", "+y;
x = event.pageX;
y = event.pageY;
document.getElementById("result2").innerHTML = "(pageX,pageY) = "+x + ", "+y;
x = event.layerX;
y = event.layerY;
document.getElementById("result3").innerHTML = "(layerX,layerY) = "+x + ", "+y;
x = event.clientX;
y = event.clientY;
document.getElementById("result4").innerHTML = "(clientX,clientY) = "+x + ", "+y;
x = event.screenX;
y = event.screenY;
document.getElementById("result5").innerHTML = "(screenX,screenY) = "+x + ", "+y;
x = window.pageXOffset;
y = window.pageYOffset;
document.getElementById("result6").innerHTML = "(pageXOffset,pageYOffset) = "+x + ", "+y;
x = event.offsetX;
y = event.offsetY;
document.getElementById("result7").innerHTML = "(offsetX,offsetY) = "+x + ", "+y;
}
// --></script>
</head>
<body>
<h1>�}�E�X���W�\���e�X�g�iFirefox�ȊO�j</h1>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></div>
<div id="result6"></div>
<div id="result7"></div>
<div id="testbox">test box</div>
</body>
</html>
�@Internet Explorer�ł�window.onmousemove�̂悤��windows�I�u�W�F�N�g�Ƀ}�E�X�C�x���g��ݒ肵�Ă����삵�܂���B���̂��߁Awindow.document.onmousemove�̂悤��document�I�u�W�F�N�g�Ȃ�window�I�u�W�F�N�g�ȊO�ɃC�x���g�n���h����ݒ肷��K�v������܂��B�܂��A�C�x���g�I�u�W�F�N�g�̈����Ɋւ��Ă��u���E�U���ƂɈقȂ��Ă��܂��BFirefox�ȊO�ł�event�I�u�W�F�N�g�ɂ��}�E�X���W��ǂݏo�������ł��܂��iSafari 2, Opera�ł�event�I�u�W�F�N�g���T�|�[�g���Ă���j�BInternet Explorer�ȊO�ł̓C�x���g�������ɌĂяo�������̈����Ƃ��ēn����܂��B�܂�Safari 2, Opera�ł́A�ǂ���̕��@�ł��}�E�X���W���擾�ł���̂ɑ��AInternet Explorer�AFirefox�ł͕ʁX�ɏ�������K�v������܂��B
�@Internet Explorer���ǂ����ʂ�����@�Ƃ��ă��[�U�[�G�[�W�F���g�ׂ���@������܂��B�������AOpera�Ȃǂł̓��[�U�[�G�[�W�F���g��Internet Explorer�Ƃ��Đݒ�ł��邽�߁A���ۂɂ͐��������ʂ��邱�Ƃ��ł��܂���B�܂��Aif (document.all) { IE�ł̏��� }�Ƃ����悤�ɂ��Ē��ׂ���@������܂����A�����Opera�Ȃǂł͑Ή����Ă��邽�ߐ��������ʂł��܂���BOpera���ǂ����ʂ��邾���ł����if (window.opera) { Opera�̏��� }�Ƃ��ċL�q�ł��܂��B�������AInternet Explorer�̂ݕʏ����ɂ��������߁AInternet Explorer�ɂ����Ȃ����\�b�h�����邩�ǂ����Ń`�F�b�N����悤�ɂ��܂��BInternet Explorer�ɂ����Ȃ����\�b�h�͑�������܂����A�����ł�Internet Explorer 5.5����T�|�[�g����Ă���createPopup���\�b�h�����邩�ǂ����Œ��ׂ܂��B�ȉ��̂悤�ɂ����Internet Explorer���ǂ������ׂ鎖���ł��܂��B
if (window.createPopup) { IE5.5�ȍ~�ł̏��� }
�@window.addEventListener�Ŕ��ʂ�������@������܂����AInternet Explorer 7�łǂ��Ȃ邩�A�܂��T�|�[�g����Ă��C�x���g�I�u�W�F�N�g���]���̂܂܂ł���\�����l����Ƃ��̂悤�ɂ��Ă����������ʂ͗ǂ������ł��B
�@���ɃC�x���g�I�u�W�F�N�g�ŗp�ӂ���Ă���}�E�X���W�Ɋւ���v���p�e�B�͑�������܂����A�u���E�U���ƂɑΉ����܂��܂��ł��B�܂��A�����v���p�e�B���ł������錋�ʂ��قȂ�܂��B�\�ɂ܂Ƃ߂�ƈȉ��̂悤�ɂȂ�܂��B
| Internet Explorer | Firefox | Safari | Opera |
---|
x,y | �� | �~ | �� | �� |
---|
pageX,Y | �~ | �� | �� | �� |
---|
layerX,Y | �~ | �� | �� | �~ |
---|
clientX,Y | �� | �� | �� | �� |
---|
screenX,Y | �� | �� | �� | �� |
---|
pageXOffset,Y | �~ | �� | �� | �� |
---|
offsetX,offsetY | �� | �~ | �� | �� |
---|
�@���j�^��ʏ�̍��W�ł���screenX, screenY�̂݊��������葼�́A�݊������Ȃ����ƂɂȂ�܂��B
�@Firefox, Safari, Opera�ł�pageX,Y��Internet Explorer��x,y��document.body.scrollLeft, document.body.scrollTop�����Z�������̂ɂȂ�܂��B�܂��A�C�x���g�����������I�u�W�F�N�g�̍������Ƃ����C�x���g���W��Firefox, Safari, Opera�ł�layerX, layerY�ɂȂ�܂��B����Ɠ������̂�Internet Explorer�ł�offsetX, Y�ƂȂ�܂��BOpera�ł͓��삵�Ȃ��̂�Internet Explorer�Ɠ���offsetX, Y�ɂȂ�܂��B���̏ꍇ�ɂ�Internet Explorer, Opera�����ɑ��݂���document.all���g���ău���E�U���ʂ��s���܂��B
�@�������l�����āAInternet Explorer, Firefox, Safari, Opera�œ��삷��}�E�X���W���擾����X�N���v�g�͈ȉ��̂悤�ɂȂ�܂��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>�}�E�X���W�\���e�X�g</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
window.document.onmousemove = getMouseXY;
function getMouseXY(evt)
{
// x,y��pageX,Y
if (window.createPopup)
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}else{
x = evt.pageX;
y = evt.pageY;
}
document.getElementById("result1").innerHTML = "(x,y) = "+x + ", "+y;
// offsetX,Y��layerX,Y
if (document.all)
{
cx = event.offsetX;
cy = event.offsetY;
}else{
cx = evt.layerX;
cy = evt.layerY;
}
document.getElementById("result2").innerHTML = "(offsetX,offsetY) = "+cx + ", "+cy;
}
// --></script>
</head>
<body>
<h1>�}�E�X���W�\���e�X�g(���ʁj</h1>
<div id="result1"></div>
<div id="result2"></div>
<div id="testbox">test box</div>
</body>
</html>
�@�O�X���Ő��������h���b�O�����̃T���v���ł́A�C�x���g�������ɃN���b�N���W�ƃI�u�W�F�N�g���W�̍���������Ă��܂����B�������L�̂悤�ɃI�u�W�F�N�g��ł̃C�x���g�������̍��W�ɕύX�������̂��ȉ��̂��̂ɂȂ�܂��B�܂��A�y�[�W���X�N���[�������ꍇ��Internet Explorer�ł̓h���b�O�Ώۂ̃I�u�W�F�N�g�̍��W�����������Ȃ�܂��B����̓y�[�W�̃X�N���[���������Z���Ă��Ȃ����߂ł��B�������L�̂悤�ɉ��Z���邱�ƂŐ��������삷��悤�ɂȂ�܂��B�i�T���v����
���s�����j
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�h���b�O�����i�e�u���E�U�̃C�x���g�ɑΉ������T���v���j</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
// �h���b�O�ΏۃI�u�W�F�N�g���
dragObj = new Object();
dragObj.dragFlag = false;
dragObj.offsetX = this.offsetX = 0;
dragObj.mouseX = this.mouseY = 0;
dragObj.target = null;
dragObj.zIndex = 1; // �ŏ���Z-Index
dragObj.maxLayer = 3; // �ő僌�C���[����
// �C�x���g�n���h���Ȃǂ�ݒ�
window.onload = function()
{
document.getElementById("mainContents").onmousedown = dragStart;
document.getElementById("mainContents").style.left = "60px";
document.getElementById("mainContents").style.top = "50px";
document.getElementById("mainContents").style.zIndex = 1;
document.getElementById("mainContents2").onmousedown = dragStart;
document.getElementById("mainContents2").style.left = "160px";
document.getElementById("mainContents2").style.top = "150px";
document.getElementById("mainContents2").style.zIndex = 2;
document.getElementById("mainContents3").onmousedown = dragStart;
document.getElementById("mainContents3").style.left = "260px";
document.getElementById("mainContents3").style.top = "260px";
document.getElementById("mainContents3").style.zIndex = 3;
window.document.onmousemove = dragProc;
window.document.onmouseup = dragEnd;
}
// �h���b�O�J�n����
function dragStart(evt)
{
if(!window.createPopup)
{
targetElement = evt.target;
}else{
targetElement = event.srcElement;
}
if (document.all)
{
dragObj.offsetX = event.offsetX;
dragObj.offsetY = event.offsetY;
}else{
dragObj.offsetX = evt.layerX;
dragObj.offsetY = evt.layerY;
}
dragObj.dragFlag = true;
dragObj.targetObj = targetElement;
dragObj.zIndex += dragObj.maxLayer;
dragObj.targetObj.style.zIndex = dragObj.zIndex;
return false;
}
// �h���b�O�I������
function dragEnd()
{
dragObj.dragFlag = false;
}
// �h���b�O���̏���
function dragProc(evt)
{
var mouseX,mouseY;
if (document.all)
{
mouseX = event.x + document.body.scrollLeft;
mouseY = event.y + document.body.scrollTop;
}else{
mouseX = evt.pageX;
mouseY = evt.pageY;
}
if (!dragObj.dragFlag) return;
dragObj.targetObj.style.left = mouseX - dragObj.offsetX;
dragObj.targetObj.style.top = mouseY - dragObj.offsetY;
return false;
}
// --></script>
</head>
<body>
<h1>�h���b�O�����i�e�u���E�U�̃C�x���g�ɑΉ������T���v���j</h1>
<div id="mainContents"><br><br>�������h���b�O�ł��܂��B</div>
<div id="mainContents2"><br><br>�������h���b�O�ł��܂��B</div>
<div id="mainContents3"><br><br>�������h���b�O�ł��܂��B</div>
</body>
</html>
�@���łɁA�T���v���Ƃ��ďo�Ă��܂����A�����ł̓y�[�W�ɔC�ӂ̃^�O��lj�������@�ɂ��Đ������܂��B
[
��́@14:�y�[�W�Ƀ^�O��lj�������]
[
�ڎ���]
(2006.1.17)