添加鼠标上键&onMousedown事件——javascript函数内部

adding onMouseUp & onMousedown events -- inside javascript function

本文关键字：事件 javascript 函数 内部 onMousedown 鼠标 amp 添加      更新时间：2023-09-26

我有一个div&其内部是具有CCD_ 1的输入图像
现在，我将输入图像的id传递给一个函数。

我知道我们可以直接在input标记中添加事件处理程序。但我想在javascript代码中完成
为什么图像CCD_ 2&onMouseUp是not working吗
当我按下图像时，他们没有警报弹出

<html>
<script type="text/javascript" src="../lib/mylib.js"></script>
<body>
        <div class="Area">
            <input id="Area-Light" type="image" src="http://www.psdgraphics.com/file/glossy-light-bulb.jpg" />
            <p class="imgtxt" ">Area-Light</p>
        <hr/>
<script type="text/javascript" >
var btn1 = new my_stateButton( "Area-Light");              // Button type
</script>
</body>
</html>

现在这个函数在mylib.js中，我正在添加onMouseDown&图像的onMouseUp事件：--

function my_stateButton(   canvasName )
{
    this.canvas = document.getElementById(canvasName);
    this.canvas.onmousedown = this.onMouseDown.bind(this);
    this.canvas.onmouseup = this.onMouseUp.bind(this);

    // Do some work
};

Evevnt函数：--

my_stateButton.prototype.onMouseDown = function() 
{
   alert('down');
};

my_stateButton.prototype.onMouseUp = function() 
{
   alert('up');  
};

您当然可以在javascript中做到这一点！

第一个问题是，设置btn1的脚本是在设置MouseDown等脚本之前执行的，所以请将其移动到主脚本中。

接下来，您不需要.bind(this)。this.onMouseDown已经是一个函数，您只需将this.canvas.onmousedown属性设置为等于该函数，所以只需执行

this.canvas.onmousedown = this.onMouseDown;

将它们结合在一起，您将获得一个工作系统，正如您在这个jsbin中所看到的：http://jsbin.com/pofoc/1/edit。

我不完全确定为什么要构建一个对象来保存画布引用，并具有onMouseDown和onMouseUp属性；您可以将它们分配到该函数中，如下所示：http://jsbin.com/yaqah/2/edit。

我试了一下代码，它成功了。

我唯一怀疑的是"ID="Area-Light"0"是在初始化my_StateButton对象之后定义的。

当对象初始化时，两个函数（my_stateButton.prototype.onMouseUp和my_stateButton.prototype.onMouseDown）必须已经定义，否则当编译器执行构造函数代码时，它试图访问未定义对象的绑定方法，并生成一个js错误，阻止执行事件附加。

相关文章：