修改事件委派的mouseEvent对象的`target` [英] Modify `target` of mouseEvent object for Event Delegation

问题描述

是否可以修改mouseEvent的目标属性？我有一个事件委托者函数，委托人（parentSelector，childSelector，事件，回调），用于将事件监听器绑定到父dom节点（当动态替换子节点时很有用） ）。

Is it possible to modify the target property of a mouseEvent? I have an event delegator function, delegator(parentSelector, childSelector, event, callback), which is used to bind events listeners to parent dom nodes (useful when child nodes are replaced dynamically).

除了在childSelector的childNode上发生单击的情况外，这种方式非常有效。例如，事件绑定到正文，以侦听 a.clickHere 上的点击，其中还包含跨度。如果单击跨度，则返回 event.target ，而不是 a.clickHere 节点。

This works very well, except in the case the the click occurs on a childNode of the childSelector. For example, an event is bound to the body, to listen for clicks on a.clickHere, which also contains a span. If the span is clicked, it is returned as the event.target, rather than the a.clickHere node.

我已尝试在委托人函数中添加属性到事件对象（可行），但无法覆盖现有属性， target ：

I have tried adding properties to the event object within the delegator function (which works), but am unable to overwrite the existing property, target:

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

这是我的事件委托人函数，包含元素的polyfill .matches函数：

This is my event delegator function, with a polyfill for the element.matches function:

//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>

那么，有没有办法写入该属性，或者替代返回事件对象的副本修改后的值？

So, is there any way to write to that property, or alternative return a copy of the event object with the modified value?

推荐答案

mouseEvent的目标是只读的，所以你将无法修改它传统方法。但是，您可以设置一个新变量，例如：

The target of a mouseEvent is read only, so you won't be able to modify it with traditional methods. However, you can set a new variable, for instance:

e.desiredTarget = currentTarget;

然后你可以在任何地方参考 e.desiredTarget 您想要使用 e.target 。

Then you can reference e.desiredTarget anywhere that you want to use e.target.

这篇关于修改事件委派的mouseEvent对象的`target`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！