Javascript addEventListener和removeEventListener与部分功能

我想创建javascript函数将一个事件监听器添加到一个div，这样当div被点击时，它会运行一个函数，并确保div只能被点击一次。我的功能看起来像现在这种权利：Javascript addEventListener和removeEventListener与部分功能

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，它说“按钮＃2点击”。

来源

2016-08-12 user1763510

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

总是声明你的变量。另请注意，arguments.callee已弃用。您可以改用named function expression。

来源

2016-08-12 00:11:52

除了当你可以使用'let';然后总是使用'let';）（在IE11中支持） – Sampson

当然：D（编辑） –

@Sampson：首选'const' =） – Ryan

您没有声明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会更好。）

来源

2016-08-12 00:12:30 Ryan

与'e.target'搭配很好。 'this'是最好的解决方案，但也可以使用'e.currentTarget'。只要元素包含其他元素，“e.target”就会中断。 –

Javascript addEventListener和removeEventListener与部分功能

回答

相关问题