将函数实例绑定到元素

时间:2014-09-13 13:27:24

标签: javascript

当页面上只有一个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);

0 个答案:

没有答案