Question

我有一个div＆amp;在它里面，它们是ID="Area-Light"的输入图像现在我在这里将输入图像的id传递给函数。

我知道我们可以在输入标记内直接添加事件处理程序。但我想在javascript代码中做到这一点为什么图像的事件处理程序onMouseDown＆amp; 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＆amp;添加事件处理程序。 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');  
};

Answer 1

我尝试了代码，但它确实有用。

唯一怀疑的是＆＃34; Event functions＆＃34;在my_StateButton对象初始化后定义。

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

Answer 2

你当然可以在javascript中执行此操作！

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

接下来，您不需要.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。

添加onMouseUp＆amp; onMousedown事件 - 里面的javascript函数

2 个答案: