Question

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

2009-10-10

1734

javascript html

我只是想创建一个类，当鼠标位于 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

    this.DIV;

这不会执行任何操作。它计算结果为 undefined ，因为不存在这样的属性，然后抛出 undefined 值。

function MovingDIV()

整个函数不执行任何操作（因为它被 MovingDIV 的下一个定义覆盖）。

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

您需要向其中添加 +'px' 才能使其在标准模式和跨浏览器下工作。类似地，样式中为 400px。

正如 John 所说，如果您使用的是 JavaScript 对象，则必须小心绑定 this ，通常是通过某种闭包（但将来使用 Function.bind）。我担心上面的构造函数会让你不太理解 JavaScript 是如何构造对象的。

你可以通过避免与原型/this 相关的任何内容来简化这样的示例，只使用闭包来记住你感兴趣的 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>

Answer 2

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

<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>