如何从文档和窗口中删除JavaScript touch事件处理程序？

Question

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

日历将托管在公共Salesforce社区页面中.

我希望能够使用touch和通过移动设备在日历中创建活动drag.

Salesforce Communities和FullCalendar都支持移动设备.

• FullCalendar:浏览器测试和版本兼容性
• Salesforce:社区的浏览器支持

而FullCalendar有触控支持

但是当我使用移动设备访问社区页面时,我无法使用touch和drag创建日历条目.

有touch通过Salesforce的社区页面/框架创建的事件处理程序:

• documentfor touchstart和touchendandtouchcancel
• window 对于 touchmove

这似乎覆盖了FullCalendar touch事件.

以下是调试的示例日历:

• 示例日历

我怎样才能删除touch的事件处理程序document和window？

我试过添加:

    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);

但我刚刚在控制台中出现此错误:

[干预]由于目标被视为被动,无法阻止被动事件监听器内的默认.

而且没有一个日历按钮可以工作了.

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()与此事件的初始化相同.而对于listerners的指针应该像在里面一样addEventListener().例如,如果你 自己有指针像listerners:

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);.例如,对于第一个示例中的窗口,您将得到如下输出:

如果监听器添加了匿名函数,那么它没有名称.

3. 您可以使用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脚本.使用此脚本,您甚至可以获得匿名侦听器,但您必须在代码中添加一些侦听器之前添加它.

祝好运!