当页面上只有一个div时,下面的代码可以正常工作。如果有多个div,并且多次调用该函数,它们会相互干扰,如this FIDDLE所示。
我认为,只要变量不在全局范围内,并且我将它们绑定到具有this
的元素,就没有问题。但显然我错了: - )
如何将函数的实例绑定到每个元素而不会相互干扰?
其次,如果我从页面中删除元素,函数的实例是否会消失?
HTML
<div id="was_100" class="was">
<div id="cx_100" class="cx"></div>
</div>
<br>
<br>
<div id="was_200" class="was">
<div id="cx_200" class="cx"></div>
</div>
的Javascript
function test(o) {
var my = this;
my.was = document.getElementById("was_" + o);
my.cx = document.getElementById("cx_" + o);
alert(my.was.id);
my.move = function (e) {
e=e||window.e;
var el=e.target||e.srcElement;
var left = e.clientX - el.getBoundingClientRect().left;
my.cx.style.left = left + "px";
}
my.was.addEventListener("mousemove", my.move, false);
}
test(100);
test(200);