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

【问题标题】：Calling a function before any click event handler在任何点击事件处理程序之前调用函数
【发布时间】：2016-05-05 10:18:41
【问题描述】：

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

【问题讨论】：

Could you show us the code?

标签： javascript jquery

【解决方案1】：

我在这里看到了两种解决方案。

首先是使用在点击事件之前触发的 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));

或者你可以在变量中保存新的函数；

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

只需撰写下一步

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

但 lodash 内部更复杂。

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

【讨论】：

【解决方案2】：

您可以在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);
}

&lt;div id="target"&gt;Some text to click on&lt;/div&gt;

这是一个有助于理解捕获标志的相关问题：Unable to understand useCapture attribute in addEventListener

【讨论】：