javascript — изменение `target` объекта mouseEvent для делегирования события

Изменить `target` объекта mouseEvent для делегирования события

Можно ли изменить target свойство mouseEvent? У меня есть функция delegator(parentSelector, childSelector, event, callback) , который используется для привязки слушателей событий к родительским dom-узлам (полезно, когда дочерние узлы заменяются динамически).

Это работает очень хорошо, за исключением случая, когда щелчок происходит по дочернему узлу childSelector. Например, событие привязано к body , чтобы прослушивать щелчки в a.clickHere , который также содержит диапазон. Если щелкнуть диапазон, он возвращается как event.target , а не как узел a.clickHere .

Я попытался добавить свойства к объекту события в функции делегатора (который работает), но не могу перезаписать существующее свойство target :

 e.myProperty = "hello world" //works e.target = currentTarget; //doesn't seem to work 

Это моя функция делегатора событий с полифилом для функции element.matches:

 //Event Delegator function delegator = function(parentSelector, childSelector, event, callback){ //get a nodelist of each possible parent var parents = document.querySelectorAll(parentSelector); //bind event listener to each possible parent for(var i = 0; i {amp}lt; parents.length; i  ){ parents[i].addEventListener(event, function(e){ var currentTarget = e.target; //loop while the currentTarget isn't the parent selector or the html tag while(!matches(currentTarget, parentSelector) {amp}amp;{amp}amp; !matches(currentTarget,'html')){ //found it! currentTarget is what I was looking for if(matches(currentTarget,childSelector)){ //try to overwrite e.target with the "intended" target e.target = currentTarget; //execute the callback function and end callback.call(this, e); break; } //didn't find it yet. walk up the dom currentTarget = currentTarget.parentNode; } }, false); } }; //Matches polyfill matches = function(element, selector){ var api = ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector']; for(var a in api){ if(typeof element[api[a]] === 'function'){ return element[api[a]](selector); } } }; 

Этот код будет называться так:

 delegate('body', '.search-filter a', 'click', function(event){ var theLink = event.target; //might be a node inside the a, such as a span. }); 

С этим HTML

 {amp}lt;div class="search-filter"{amp}gt; {amp}lt;a{amp}gt;Do Work {amp}lt;span{amp}gt;(or not!){amp}lt;/span{amp}gt;{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; 

Итак, есть ли способ записать в это свойство или альтернативно вернуть копию объекта события с измененным значением?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector