Вызов функции перед любым обработчиком события click

Question

Привет Я хочу вызвать функцию каждый раз перед любым методом обработчика события клика. Я знаю, что внутри метода обработчика я могу сначала вызвать свою функцию, но это довольно громоздко, поскольку я должен делать это на столь большом месте, а также иметь в виду то же самое для любых будущих событий кликов.

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); 
 
}

<div id="target">Some text to click on</div>

Вот связанный с этим вопрос, который помогает понять флаг захвата: Unable to understand useCapture attribute in addEventListener

Answer 2

Я вижу два решения здесь.

Первый заключается в использовании OnMouseDown, который обжигают до события щелчка

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

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

Другой способ заключается в использовании Compose, который будет создавать новый многоразовый функция для вас (НПМ я 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 один более сложный внутри.

Вот некоторые математические теории о композиции функций, если вы заинтересованы в https://en.wikipedia.org/wiki/Function_composition