Question

我正在使用records audio in the browser的小型图书馆并将其上传到服务器，但是想要在用户点击按钮时向用户提供上传到浏览器的选项。

大部分库都被导入到html页面，因此我想调用它的功能，并且它的参数在页面上不可用。

在调用＆＃39;上传＆＃39;的功能中。函数，我尝试将函数调用分配给onclick事件：

document.getElementById("clickMe").onclick = endFile(buf, 'mp3');

HTML为：

<a href='#' id="clickMe" class="btn btn-default">Upload</a>

但它过早地开火，我猜是因为该功能正在被评估＆＃39;。该库使用jQuery，我尝试将e.preventDefault()和e.stopPropagation()添加到外部函数，两者都没有。

注意到当我分配了一个匿名函数时，它没有被调用，所以我正在使用：

document.getElementById("clickMe").onclick = function(){
        endFile(buf, 'mp3');
        }

这似乎有效。有人可以解释一下原因，并且无论如何都要让我知道为什么这可能是一个不可取的方法。

Answer 1

您的功能过早触发的原因是，当您打算分配它时，您实际上正在调用它。

改变这个......

document.getElementById("clickMe").onclick = endFile(buf, 'mp3');

对此...

document.getElementById("clickMe").onclick = function() {
  endFile(buf, 'mp3');
};

或者这......

document.getElementById("clickMe").onclick = endFile.bind(this, buf, 'mp3');

进一步解释 - endFile(buf, 'mp3')实际调用该函数。因此，不是将您的函数指定为onclick-handler，而是调用它并分配其返回值。

Answer 2

Javascript查看任何函数表达式endFile(buf, 'mp3')是否将其分配给变量或处理程序，只是一个“表达式”，因此它立即调用它。

Answer 3

你说这是evaluating函数方法是正确的。

document.getElementById("clickMe").onclick = endFile(buf, 'mp3');

类似于：

var returnValue = endFile(buf, 'mp3');

而是要将onclick设置为函数reference的{{1}}。

endFile

虽然需要绑定您希望在事件发生时传递的参数。这取决于您的用例和这些值的范围。

document.getElementById("clickMe").onclick = endFile

创建匿名函数时没有错误，但替代方法是相同的。

＆＃13;

document.getElementById("clickMe").onclick = endFile.bind(buf, 'mp3')

＆＃13;

function endFile(typeOfFile) {
  var buffer = this;
  console.log(buffer, typeOfFile);
  return true;
}
var buf = 'some buffer value';
document.getElementById("clickMe").onclick = endFile.bind(buf, 'mp3');

＆＃13;

防止动态创建的onclick事件过早触发

3 个答案: