Question

我只是想创建一个类，当鼠标在DIV上时移动指定的DIV。我的问题似乎是因为我将自定义类的方法指定为事件处理程序。我的问题是我可以将对象的方法指定为事件处理程序吗？或者还有其他方法吗？

<script type="text/javascript">
<!--

    function MovingDIV()
    {
        this.DIV;
        this.posX;
        this.intervalID;
        this.StartDIV = StartDIV;
        this.MoveDIV = MoveDIV;
        this.StopDIV = StopDIV;
    }

    function MovingDIV(DIVname)
    {
        this.DIV = document.getElementById(DIVname);            
    }

    function StartDIV()
    {
            this.intervalID = setInterval(this.MoveDIV, 100);
    }
    function MoveDIV()
    {

        this.posX = parseInt(this.DIV.style.left);

        this.posX += offset;
        this.DIV.style.left = this.posX;
        if(this.posX > 500)
        {
            offset = -50;
        }
        else if(this.posX < 50)
        {
            offset = 50;
        }

    }
    function StopDIV()
    {
        clearInterval(this.intervalID);
    }

    var MyMovingDIV = new MovingDIV("moving_div");
    var test = 123;

//-->
</script>

<div id="moving_div" style="border: 5px outset blue;  width: 160px; background-color: yellow; color: red; position: absolute; left: 400;" onmouseover = "MyMovingDIV.StartDIV()" onmouseout = "MyMovingDIV.StopDIV()">
THE MOVING DIV CLASS
</div>

Answer 1

带注释（工作）的源代码如下：

<html>
<head>
<script type="text/javascript">
<!--

    // deleted other constructor, JS doesn't have name overloading
    function MovingDIV(DIVname)
    {
        this.DIV = document.getElementById(DIVname);
        this.posX = null;
        this.intervalID = null;
        // offset was uninitialized
        this.offset = 50;
    }

    // this is the syntax for declaring member functions
    MovingDIV.prototype.StartDIV = function()
    {
        // need to preserve "this" inside of setInterval function, so save
        // it in "self" and pass anonymous function to setInterval
        var self = this;
        this.intervalID = setInterval(function() { self.MoveDIV(); }, 100);
    }

    MovingDIV.prototype.MoveDIV = function()
    {
        // left should have "px" on end so remove it before parseInt
        this.posX = parseInt(this.DIV.style.left.replace(/px/, ""));
        this.posX += this.offset;

        // add "px" to specify units
        this.DIV.style.left = this.posX + "px";

        if(this.posX > 500)
        {
            this.offset = -50;
        }
        else if(this.posX < 50)
        {
            this.offset = 50;
        }

    }

    MovingDIV.prototype.StopDIV = function()
    {
        clearInterval(this.intervalID);
    }

    var MyMovingDIV, test;

    // <div id='moving_div'> does not exist yet
    // need to wait until page has loaded    
    window.onload = function()
    {
        MyMovingDIV = new MovingDIV("moving_div");
        test = 123;
    }

//-->
</script>
</head>

<body>
<div id="moving_div" style="border: 5px outset blue;  width: 160px; background-color: yellow; color: red; position: absolute; left: 400px;" onmo
useover = "MyMovingDIV.StartDIV()" onmouseout = "MyMovingDIV.StopDIV()">
THE MOVING DIV CLASS
</div>
</body>
</html>

Answer 2

    this.DIV;

这无济于事。它的计算结果为undefined，因为不存在这样的属性，然后抛出undefined值。

function MovingDIV()

这整个函数什么都不做（因为它被MovingDIV的下一个定义所覆盖）。

this.DIV.style.left = this.posX;

您需要添加+'px'才能使其在标准模式和跨浏览器中运行。同样400px的风格。

正如约翰所说，如果你正在使用JavaScript对象，你必须注意绑定this，通常是通过某种闭包（但将来使用Function.bind）。我担心上面的构造函数，虽然你不太了解JavaScript如何对象。

你可以通过避免与原型设计相关的任何事情来简化这样的例子，只需使用一个闭包来记住你感兴趣的div。直到你准备好了解细节（并且，说实话， JS对象模型你可能会以这种方式变得更好。例如：

<script type="text/javascript">

    function slideyElement(element, x, xleft, xright, dx, dt) {
        var interval= null;

        function slide() {
            var x= dx;
            if (x<xleft || x>xright)
                dx= -dx;
            element.style.left= x+'px';
        }

        element.onmouseover= function() {
            interval= setInterval(slide, dt);
        };
        element.onmouseout= function() {
            if (interval!==null)
                clearInterval(interval);
            interval= null;
        };
    };

</script>

<div id="moving_div" style="border: 5px outset blue; width: 160px; background-color: yellow; color: red; position: absolute; left: 400px;">

<script type="text/javascript">
    slideyElement(document.getElementById('moving_div'), 400, 50, 500, 50, 100);
</script>

在onmouseover事件HTML Javascript上调用对象的类方法

2 个答案: