js鼠标及对象坐标控制属性详细解析

JS鼠标及对象坐标控制属性详细解析

在JavaScript中，有很多属性可以用来控制对象的位置，本文主要讲解与鼠标有关的一些属性，以及如何利用这些属性来控制对象的位置。

鼠标相关属性

event.clientX && event.clientY

event.clientX表示鼠标相对于浏览器窗口可视区域的水平位置，event.clientY表示鼠标相对于浏览器窗口可视区域的垂直位置。可以通过以下代码来获取鼠标的位置：

document.addEventListener('mousemove', function(event) {
    console.log(event.clientX, event.clientY);
});

event.pageX && event.pageY

event.pageX表示鼠标相对于文档的水平位置，event.pageY表示鼠标相对于文档的垂直位置。它们的值不受水平滚动条或垂直滚动条的影响。可以通过以下代码来获取鼠标的位置：

document.addEventListener('mousemove', function(event) {
    console.log(event.pageX, event.pageY);
});

对象相关属性

offsetTop && offsetLeft

offsetTop表示一个元素的上边框到其offsetParent元素的上边框的距离，offsetLeft表示一个元素的左边框到其offsetParent元素的左边框的距离。可以通过以下代码来获取一个元素的位置：

var element = document.getElementById('my-element');
console.log(element.offsetTop, element.offsetLeft);

offsetWidth && offsetHeight

offsetWidth表示一个元素的整个宽度，包括border和padding，但不包括margin；offsetHeight表示一个元素的整个高度，包括border和padding，但不包括margin。可以通过以下代码来获取一个元素的大小：

var element = document.getElementById('my-element');
console.log(element.offsetWidth, element.offsetHeight);

案例分析

以下是一个案例，当鼠标在一个元素内部滑动时，会将该元素的位置随着鼠标的移动而发生变化。

<div id="my-element" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: #ccc;"></div>

var element = document.getElementById('my-element');
document.addEventListener('mousemove', function(event) {
    var x = event.pageX - element.offsetWidth / 2;
    var y = event.pageY - element.offsetHeight / 2;
    element.style.left = x + 'px';
    element.style.top = y + 'px';
});

以上代码中，首先获取了要操作的元素（通过getElementById方法），然后监听了鼠标移动事件。鼠标移动事件触发时，根据鼠标的位置来计算出元素的新位置，并通过操作元素的style.left和style.top属性来实现元素位置的改变。

以下是另一个案例，当鼠标在一个元素内部滑动时，会在该元素的底部显示一个提示框，该提示框的位置始终与鼠标相同。

<div id="my-element" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: #ccc;"></div>

var element = document.getElementById('my-element');
var tooltip = document.createElement('div');
tooltip.innerText = 'Tooltip';
tooltip.style.position = 'absolute';
tooltip.style.display = 'none';
document.body.appendChild(tooltip);

element.addEventListener('mousemove', function(event) {
    var x = event.clientX;
    var y = event.clientY;
    tooltip.style.display = 'block';
    tooltip.style.top = y + 'px';
    tooltip.style.left = x + 'px';
});

element.addEventListener('mouseout', function(event) {
    tooltip.style.display = 'none';
});

以上代码中，首先获取了要操作的元素（通过getElementById方法），然后创建了一个新的div元素，并设置该元素的位置和显示内容。在鼠标移动事件触发时，计算出鼠标的位置并让提示框显示出来，并将提示框的位置设置为鼠标的位置。在鼠标移出事件触发时，隐藏提示框。

这两个案例都是通过计算鼠标位置来实现元素位置的改变，但具体的实现方式却是不同的。第一个案例中，元素跟随鼠标移动，而第二个案例中，提示框跟随鼠标移动。这里只是两个简单的例子，但同样的技术也可以用于创建更复杂的交互效果。