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.desiredTarget的任何地方引用e.target。

修改事件委派的mouseEvent对象的`target`

1 个答案: