监听列表事件的监控核心技术（编写代码）

我不是女神ヾ 2022-04-08 13:57 62阅读 0赞

这一段代码是根据上一篇“监听列表事件的监控”所编写的，在onmousemove事件中，可以通过事件对象获取到鼠标当前的坐标点，我们该如何将坐标点转化成为元素的left和top属性值就是拖动技术的核心呢？我们就是能够把鼠标的移动在所需的一定空间坐标来实现我们把握要列表事件中的定位置的坐标，也就是不停地移动鼠标时我们便会发现coord中的坐标信息不断地被更新；注意，可视范围是除了菜单条和状态条外的整个浏览器窗口，因为监听的是document的事件是经过修改监听对象为dragger来观察效果。例如：onmousemove事件没有任何前置条件，来获取鼠标光标在整个浏览器的窗口中的当前坐标：<!-坐标显示框-->

</div>

//监听 document 的 事件 （ 是把所监听的对象事件用来进行修改监听对象的）

document. = function (e) \{

e = e| |event;

//更新坐标信息

document.getElementById('coord').innerHTML= e.clientx+":"+e.clientY;

</Script>

在应用onmousemove事件的同时，鼠标的移动事件；包括左键、右键和滚轮。与onmousedown事件成相反，并且只能在onmousedown事件发生后才能发生onmouseup事件，是因为只有案件被按下后才会发生弹起。当鼠标按键在dragger上按下时，onmousedown事件将被触发，提示框显示“元素被拿起”。

与其同时，无论元素的定位方式是绝对的还是相对的，要让它动起来就只有不断地更新它的left和top的属性；编写的代码与事件。

<style>

\#dragger \{

;

height:100px;

background:\#ccc;

position:relative;

</style>

var dragger = document.getElementById('dragger');

//监听鼠标事件

dragger. = function () \{

if (!dragger.onmousemove)

dragger. = function () ｛

//设置x坐标

this.style.left = event.clientX ;

//设置Y坐标

this.style.top = event.clientY ;

dragger. = function () \{

alert ("元素被放下") ;

我们把代码运行的结果是在dragger上监听 dragger. = function () \{

//设置X坐标

this.style.left = event.clientX ;

//设置Y坐标

this.style.top = event.clientY ;

想到这我们便把它修改为： dragger. = function () \{

//设置X坐标

this.style.left = event.clientX - 50 ；

//设置Y坐标

this.style.top = event.clientY - 50 ;

虽然没有在快速移动鼠标时因为dragger的移动速度跟不上鼠标的移动速度，会导致dragger脱标而无法监听鼠标事件从而失去了移动功能，为了解决问题我们要在元素级别更高的地方进行监听，document的代码：

var dragger = document.getElementById ('dragger') ;

//监听鼠标事件

dragger. = function () \{

if (!document.onmousemove)

document. = function () \{

//设置X坐标

dragger.style.left = event.clientX ;

//设置Y坐标

dragger.style.top = event.clientY ;

document. = function () \{

document. = null ;

</script>

从现在看来这样输入代码效果就比较“完美”了，document作为DOM级别最高的元素，在它上面进行事件监听最好不过了；但是别忘了在松开鼠标时把onmousemove事件去掉，这个原因与在给dragger设置onmousedown事件时才绑定onmousemove事件的原因相同，所以拖了它才能动，不拖动它的时候就不能动。事件的本身先后没有顺序，所以onmousemove在任何时候都会触发，代码中也要进行控制。

这并没有使我们如愿，也没达到“核心技术”；虽然我们已经完成了一些主要的步骤，我们还虽要解决一个问题，设置计算鼠标点相对于元素的简距。下面我们来解决这个问题：

var dragger = document.getElementById('dragger') ;

//监听鼠标事件

dragger. = function () \{

//获取鼠标当前坐标

var pageX = event.clientX ;

var pageY = event.clientY ;

//获取元素坐标

//当没有设置left和top属性时，IE下默认值为auto

var offx = parseInt (this.currentStyle.left) || 0 ；

var offY = parseInt (this.currentStyle.top) || 0 ;

//获取鼠标相对于元素的间距

var offXL = pageX – offX ;

var offYL = pageY - offY ;

if ( !document. )

document. = function () \{

//设置X坐标

dragger.style.left = event.clientX – offXL ;

//设置Y坐标

dragger.style.top = event.clientY - offYL ;

document. = function () \{

document. = null ;

</script>

运行代码后，会发现已经完全解决了拖动开启的闪动问题，在鼠标点和元素左上角坐标之间存在着间距，如果直接把鼠标点坐标赋给元素，那么这一部分间距就会消失掉，从而造成拖动开启闪动；好在这个间距能在鼠标单击后按键就被确定了，所以只需要在onmousedown事件中获取这个间距，然后在onmousemove实践中移动时用鼠标坐标减去这间距，就可以得到元素的坐标了。如图示：

[![clip\_image001\[4\]][clip_image001_4]][clip_image001_4_clip_image001_4]

1.鼠标边距

2.元素边距

[clip_image001_4]: http://huangyouliang10.blog.51cto.com/attachment/201009/9/1562091_1284016889Oz7L.gif
[clip_image001_4_clip_image001_4]: http://huangyouliang10.blog.51cto.com/attachment/201009/9/1562091_12840168895S0a.gif