修改mouseEvent对象的“ target”以进行事件委托

Question

是否可以修改mouseEvent的target属性？ 我有一个事件委托函数delegator(parentSelector, childSelector, event, callback) ，该函数用于将事件侦听器绑定到父dom节点（在动态替换子节点时很有用）。

这非常有效，除非单击发生在childSelector的childNode上。 例如，将一个事件绑定到body ，以监听对a.clickHere点击，该点击也包含一个跨度。 如果单击了范围，则将其作为event.target返回，而不是a.clickHere节点。

我尝试将属性添加到委托函数内的事件对象（有效）中，但是无法覆盖现有属性target ：

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

这是我的事件委托函数，为element.matches函数提供了一个polyfill：

//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 < 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) && !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

<div class="search-filter">
    <a>Do Work <span>(or not!)</span></a>
</div>

因此，是否有任何方法可以写入该属性，或者可以选择返回具有修改后值的事件对象的副本？

Answer 1

mouseEvent的目标是只读的，因此您将无法使用传统方法对其进行修改。 但是，您可以设置一个新变量，例如：

e.desiredTarget = currentTarget;

然后，您可以在要使用e.target任何地方引用e.desiredTarget 。