为每个获取 clientX 的元素添加一个函数答案

【问题标题】：Add a function to every element that gets clientX为每个获取 clientX 的元素添加一个函数
【发布时间】：2015-07-05 18:49:31
【问题描述】：

我正在做一个拖放操作。当用户抓取元素时，我需要为每个元素添加dragenter 的事件侦听器。在该侦听器函数中，当鼠标移到该元素上时，我需要它来获取并保存clientX。我遇到的问题是它获取第一个元素的鼠标位置并为每个其他元素保持相同的位置。我该如何解决这个问题？

代码：

if(editor_children[i].nodeType != 3)
    {
        editor_children[i].addEventListener("dragenter", function(event){
            if(event.target.id !== e.target.id) event.target.className= event.target.className + " highlight";
            position= event.clientX;
            last_over= event.target.id;
            console.log("Mouse: " + e.clientX + " Position: " + position + " Last Element: " + last_over);
        })
        
        editor_children[i].addEventListener("dragleave", function(event){
            event.target.className= event.target.className.replace(' highlight', '');
        });
    }

请不要使用 JS 库。

【问题讨论】：

乍一看，可能是因为您使用相同的变量（位置变量）来存储每个元素的每个位置？你也让自己很难受。只需执行 function(e){e=e||event;并将 e 用于所有内容。
位置变量是放置函数所需的全局变量（是的，我知道，编码错误。稍后会修复）。不过我找到了问题，谢谢。

标签： javascript dom-events mouseevent mouse-position

【解决方案1】：

这就是为什么我不是 JavaScript 的忠实粉丝。无论如何，问题是由于我在循环中创建了一个函数，所以它每次都使用相同的值，而不是变量值。我只是通过运行它来了解这一点，它抛出了 JSHint。此外，我必须清除拖放调用之间的功能，以避免存储数据出现问题。很难解释，但我明白了。

【讨论】：