javascript - 如何从文档和窗口中删除 JavaScript 触摸事件处理程序？

Question

我有一个网页，显示 FullCalendar 的日历

日历托管在公共(public) Salesforce 社区页面内。

我希望能够通过移动设备使用触摸和拖动在日历中创建事件。

Salesforce 社区和 FullCalendar 都支持移动设备。

• FullCalendar: Browser Testing & Version Compatibility
• Salesforce: Browser Support for Communities

和FullCalendar has touch support

但是当我使用移动设备访问社区页面时，我无法使用触摸和拖动来创建日历条目。

Salesforce 社区页面/框架创建了 touch 事件处理程序:

• touchstart 和 touchend 以及 touchcancel 的文档
• 窗口用于touchmove

这似乎覆盖了 FullCalendar touch 事件。

这是一个用于调试的日历示例:

• Example Calendar

如何删除 document 和 window 上的 touch 事件处理程序？

我尝试添加:

    document.addEventListener("touchstart", function (event) {
        event.preventDefault();
        console.log("touchstart: event.preventDefault()");
    }, false);

    document.addEventListener("touchend", function (event) {
        event.preventDefault();
        console.log("touchend: event.preventDefault()");
    }, false);

    document.addEventListener("touchcancel", function (event) {
        event.preventDefault();
        console.log("touchcancel: event.preventDefault()");
    }, false);

    window.addEventListener("touchmove", function (event) {
        event.preventDefault();
        console.log("touchmove: event.preventDefault()");
    }, false);

但是我刚刚在控制台中收到此错误:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

所有日历按钮都不再起作用。

Answer 1

如果添加新监听器，则无法删除监听器。所有监听器都将添加到队列中。您可以在这里看到它的示例:

var listenerLoad = function(e){console.log(1)};
window.addEventListener('load', listenerLoad, false);
window.addEventListener('load', listenerLoad, true);
window.addEventListener('load', function(e){console.log(3)}, false);
window.onload = function(e){console.log(4)};

但是，如果您为此使用适当的函数，则可以删除监听器。您必须使用函数 EventTarget.removeEventListener() 。 之前请仔细阅读本文档。参数必须与通过此事件初始化的 addEventListener() 中的参数相同。指向监听器的指针应该与 addEventListener() 中的指针相同。例如，如果您他们有指向监听器的指针，例如:

var listenerTouchStart = function(e){/**/},
    listenerTouchEnd = function(e){/**/},
    listenerTouchCancel = function(e){/**/},
    listenerTouchMove = function(e){/**/};

然后你可以像下面这样删除监听器:

document.removeEventListener('touchstart', listenerTouchStart, false);
document.removeEventListener('touchend', listenerTouchEnd, false);
document.removeEventListener('touchcancel', listenerTouchCancel, false);
window.removeEventListener('touchmove', listenerTouchMove, false);

但不要忘记 window.removeEventListener('touchmove',listenerTouchMove, false); 和 window.removeEventListener('touchmove',listenerTouchMove, true); 是不一样。如果他们使用 false 添加监听器，而您尝试使用 true 删除它，那么它将不起作用。小心!

如果你想查找监听器函数名称，那么你有 3 种方法:

1. 您可以在代码中手动搜索。
2. 在 Chrome DevTools(包括 Opera)、Safari Inspector 和 Firebug 的开发者控制台中，您可以输入控制台 getEventListeners(Object); 。例如，对于第一个示例中的窗口，您将得到如下输出:

如果监听器是用匿名函数添加的，那么它就没有名称。

您可以使用 ListenerTracker 脚本。这是它的源代码(不要尝试执行此代码片段 - 它只是为了隐藏这段长代码):

// THIS SNIPPET SHOULD NOTHING DO.
// IT IS ONLY TO HIDE THIS LONG CODE

function DO_NOT_COPY_THIS_LINE() //<-DO NOT COPY THIS LINE
{
    //////////////////////////////
    //ListenerTracker Script START
    //////////////////////////////

    var ListenerTracker = new function()
    {
        var is_active=false;
        // listener tracking datas
        var _elements_  =[];
        var _listeners_ =[];
        this.init=function(){
            if(!is_active){//avoid duplicate call
                intercep_events_listeners();
            }
            is_active=true;
        };
        // register individual element an returns its corresponding listeners
        var register_element = function(element){
            if(_elements_.indexOf(element)==-1){
                // NB : split by useCapture to make listener easier to find when removing
                var elt_listeners=[{/*useCapture=false*/},{/*useCapture=true*/}];
                _elements_.push(element);
                _listeners_.push(elt_listeners);
            }
            return _listeners_[_elements_.indexOf(element)];
        };
        var intercep_events_listeners = function(){
            // backup overrided methods
            var _super_={
                "addEventListener"      : HTMLElement.prototype.addEventListener,
                "removeEventListener"   : HTMLElement.prototype.removeEventListener
            };

            Element.prototype["addEventListener"] = function(type, listener, useCapture){
                var listeners=register_element(this);
                // add event before to avoid registering if an error is thrown
                _super_["addEventListener"].apply(this,arguments);
                // adapt to 'elt_listeners' index
                useCapture=useCapture?1:0;

                if(!listeners[useCapture][type])listeners[useCapture][type]=[];
                listeners[useCapture][type].push(listener);
            };

            Element.prototype["removeEventListener"] = function(type, listener, useCapture){
                var listeners=register_element(this);
                // add event before to avoid registering if an error is thrown
                _super_["removeEventListener"].apply(this,arguments);
                // adapt to 'elt_listeners' index
                useCapture=useCapture?1:0;
                if(!listeners[useCapture][type])return;
                var lid = listeners[useCapture][type].indexOf(listener);
                if(lid>-1)listeners[useCapture][type].splice(lid,1);
            };

            Element.prototype["getEventListeners"] = function(type){
                var listeners=register_element(this);
                // convert to listener datas list
                var result=[];
                for(var useCapture=0,list;list=listeners[useCapture];useCapture++){
                    if(typeof(type)=="string"){// filtered by type
                        if(list[type]){
                            for(var id in list[type]){
                                result.push({"type":type,"listener":list[type][id],"useCapture":!!useCapture});
                            }
                        }
                    }else{// all
                        for(var _type in list){
                            for(var id in list[_type]){
                                result.push({"type":_type,"listener":list[_type][id],"useCapture":!!useCapture});
                            }
                        }
                    }
                }
                return result;
            };
        };
    }();
    ListenerTracker.init();

    //////////////////////////////
    //ListenerTracker Script END
    //////////////////////////////
}

我找到了这个ListenerTracker脚本 here 。使用此脚本，您甚至可以获得匿名监听器，但您必须在他们在代码中添加一些监听器之前添加它。

祝你好运!