Question

我想创建javascript函数向div添加一个事件监听器，这样当单击div时，它会运行一个函数，并确保只能单击div一次。我的功能现在看起来像这样：

function clickOnce(divID,func){
  var args = Array.prototype.slice.call(arguments,2);
  functionToRun=partial(func,args);
  thisDiv=document.getElementById(divID);
  thisDiv.addEventListener("click",function(e){
    e.target.removeEventListener(e.type, arguments.callee);
    functionToRun();
  });
}

我在jsfiddle中有一个工作示例：https://jsfiddle.net/qtzLhgr4/1/ 在JSfiddle中，当我点击按钮1时，它会显示＆＃34;按钮＃2点击＆＃34;。

Answer 1

您没有声明functionToRun，因此它是隐式全局的。声明它和thisDiv：

var functionToRun=partial(func,args);
var thisDiv=document.getElementById(divID);

然后开始使用strict mode，这将阻止这些类型的问题，并阻止您使用arguments.callee，这是错误的做事方式：

thisDiv.addEventListener("click", function listener(e) {
    thisDiv.removeEventListener("click", listener);
    functionToRun();
});

（e.target也不正确; this会更好。）

Answer 2

functionToRun（和thisDiv，但这与问题无关）是全球性的。第二次调用clickOnce会覆盖functionToRun，因此两个事件处理程序都执行相同的功能。

始终声明您的变量。另请注意，arguments.callee已弃用。您可以改为使用named function expression。

具有部分功能的Javascript addEventListener和removeEventListener

2 个答案: