将 onclick 事件分配给函数

Question

我想调用一个函数onclick并将事件对象传递给函数：

 progressBarOuter.onclick = function(e)  { 
     var x; if (!e) {
         x=window.event.clientX;
     } 
      else {
          x = e.clientX
     } 

     yt.clickedOffset = x; yt.progressBarClicked
 }

所以我通过封闭对象 (yt) 来分配 clickedOffset，然后调用 progressBarClicked，然后使用 clickedOffset 变量。但我实际上更愿意做的是这样的事情：

progressBarOuter.onclick = yt.progressBarClicked(e);

因为它更紧凑。问题是，即使用户点击或没有执行这段代码...... yt.progressBarClicked(e)。

有没有办法解决这个问题？

Answer 1

你的：

progressBarOuter.onclick = yt.progressBarClicked(e);

不会产生预期的结果，因为您没有将函数 yt.progressBarClicked 分配给 onclick 处理程序。您实际上是在调用该函数，因此将其返回值分配给 onclick。

在不破坏任何东西的情况下，你可以得到的最短的工作是这样的：

progressBarOuter.onclick = function(e){
    yt.progressBarClicked((e || window.event).clientX); // pass the x position as a parameter
};

如果不包装它，yt.progressBarClicked 将从 window 对象中调用，因此函数内部的 this 的值也将设置为 window 对象。

当然你也可以在函数内部处理 x 位置的计算，然后将事件传递给它：

progressBarOuter.onclick = function(e){yt.progressBarClicked(e);};

Answer 2

试试

progressBarOuter.onclick = yt.progressBarClicked;

但从技术上讲，这与您的原始代码不同。鼠标位置 (clientX) 的计算完全缺失。