在任何单击事件处理程序之前调用函数

嗨我想在每次点击事件处理程序方法之前调用一个函数。 我知道，在点击处理程序方法中我可以先调用我的函数，但这非常麻烦，因为我必须在很多地方执行此操作，并且我必须记住以后任何点击事件都一样。

Answer 1

您可以在document对象（或任何公共父对象）上设置捕获事件处理程序，并在单个对象的事件处理程序之前首先调用它。 capture是.addEventListener()的第三个参数，它通常是可选的，默认为false ，但如果在父项上传递true ，则首先调用事件处理程序。

这是一个例子：

 document.addEventListener("click", function() { log("document capture click"); }, true); document.getElementById("target").addEventListener("click", function() { log("element click"); }, false); function log(x) { var div = document.createElement("div"); div.innerHTML = x; document.body.appendChild(div); } 

 
Some text to click on 

Answer 2

我在这看到两个解决方案。

首先是使用在click事件之前触发的onmousedown

 document.querySelector('.selector').addEventListener('mousedown', function(){ console.log('mousedown'); } document.querySelector('.selector').addEventListener('click', function(){ console.log('click'); } 

另一种方法是使用compose为你创建新的可重用函数（npm i lodash.compose）。

 var compose = require(lodash.compose); var firstFunc = function(e){ console.log('first'); return e; //if you want to use it in second function }; var secondFunc = function(e) { console.log('second'); }; document.querySelector('.selector').addEventListener('click', compose(secondFunc, firstFunc)); 

或者你可以在变量中保存新的func;

 var logFirstThanSecondOnClick = compose(secondFunc, firstFunc); document.querySelector('.selector').addEventListener('click', logFirstThanSecondOnClick); 

只需撰写下一步

 function compose(f, g) { return function(x) { return f(g(x)); } } 

但是lodash one内部更复杂。

如果您对https://en.wikipedia.org/wiki/Function_composition感兴趣，这里有一些关于函数组合的数学理论