如何从文档和窗口中删除JavaScript触摸事件处理程序?
我有一个显示日历的网页 日历托管在公共Salesforce社区页面中 我希望能够使用如何从文档和窗口中删除JavaScript触摸事件处理程序?,javascript,fullcalendar,touch,event-listener,removeeventlistener,Javascript,Fullcalendar,Touch,Event Listener,Removeeventlistener,我有一个显示日历的网页 日历托管在公共Salesforce社区页面中 我希望能够使用触摸和拖动通过移动设备在日历中创建事件 Salesforce社区和FullCalendar都支持移动设备 及 但是当我使用移动设备访问社区页面时,我无法使用触摸和拖动来创建日历条目 Salesforce社区页面/框架创建了touch事件处理程序: 文档用于touchstart和touchend和touchcancel 窗口用于触摸移动 这似乎覆盖了完整的日历触摸事件 以下是用于调试的日历示例:
触摸
和拖动
通过移动设备在日历中创建事件
Salesforce社区和FullCalendar都支持移动设备
触摸
和拖动
来创建日历条目
Salesforce社区页面/框架创建了touch
事件处理程序:
用于文档
和touchstart
和touchend
touchcancel
用于窗口
触摸移动
触摸
事件
以下是用于调试的日历示例:
文档
和窗口
上的触摸
事件处理程序
我尝试添加:
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);
但我刚刚在控制台中发现了这个错误:
[干预]由于目标被视为被动事件,无法在被动事件侦听器内防止默认
并且所有日历按钮都不再工作。也许可以尝试将“SFDC”touch
事件转发到FullCalendar事件
document.addEventListener(“touchstart”),函数(事件){
myFullCalendarEvent.OnTouch(事件);
},假);
虽然一般来说,我从未尝试过删除这样的事件,但我仍然希望它在较低的级别上工作。。。鉴于您当前的方法存在问题,这是我下一步要做的。如果添加新的侦听器,则无法删除该侦听器。所有侦听器都将添加到队列中。例如,您可以在此处看到:
var listenerLoad=function(e){console.log(1)};
window.addEventListener('load',listenerLoad,false);
addEventListener('load',listenerLoad,true);
addEventListener('load',函数(e){console.log(3)},false);
window.onload=函数(e){console.log(4)}代码>不确定您(OP)到底遇到了什么问题。当我在运行Safari的iPad上观看时,这对我来说最有效。我发现了一些bug(见下文),但也许你只是触摸的时间不够长
根据“在触摸设备上,用户要开始拖放事件,必须先点击并按住事件,才能“选择”(强调原文)。您可以使用longPressDelay
配置延迟
无论您遇到什么问题,我认为最好的解决方案不太可能包括删除事件处理程序。您很可能会在SalesForce社区的文档中找到关于如何将其他JavaScript包集成到页面中的答案
例如,我在这段代码中发现了一个bug,Chrome说这是源代码
但实际上似乎并不是来自这个URL。无论如何,考虑到console.log('loadCalendar')
行,我猜是OP写的
"helper":{
"loadCalendar":function(component) {
console.log('loadCalendar');
var params;
var self = this;
var calendar = component.find('calendar').getElement();
$(calendar).fullCalendar('destroy');
$(calendar).fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
schedulerLicenseKey: '0537034756-fcs-1530699190',
defaultView: 'agendaWeek',
// <snip> bunch of stuff omitted for brevity
select: function (starts, ends) {
params.starts = starts.format('x');
params.ends = ends.format('x');
},
// <snip> lots more stuff omitted
“助手”:{
“loadCalendar”:功能(组件){
log('loadCalendar');
var参数;
var self=这个;
var calendar=component.find('calendar').getElement();
$(日历).fullCalendar('destroy');
$(日历)。完整日历({
标题:{
左:“上一个,下一个”,
中心:'标题',
右图:“月,agendaWeek,agendaDay”
},
日程安排:“0537034756-fcs-1530699190”,
defaultView:'agendaWeek',
//为了简洁起见,省略了一堆东西
选择:功能(开始、结束){
params.starts=starts.format('x');
params.ends=ends.format('x');
},
//遗漏了很多东西
这里的问题是,params
从未初始化,因此params.starts
是一个无效引用,它抛出了一个未捕获的TypeError
。这可能可以通过将var params;
替换为var params={};
来解决,但我不能确定。事件目标.removeeventlister()方法从EventTarget中删除以前使用EventTarget.addEventListener()注册的事件侦听器。要删除的事件侦听器是使用事件类型、事件侦听器函数本身以及可能影响匹配过程的各种可选选项的组合来标识的;有关删除,请参阅匹配事件侦听器
更多关于我从哪里获得myFullCalendarEvent
的信息?我假设您有一个日历控件的实例可用?这就是myFullCalendarEvent的含义。touchend
和touchcancel
和touchmove
我将调用日历对象上的哪些方法?如何查找列表的名称ner函数?@Robs,请查看我对您的问题的更新答案。您还可以从ListenerTracker脚本的源代码中查看问题中的3个链接(请参阅上面我答案中底部的链接).但原则上,所有答案都没有更多相关信息。我发现您编写的代码中有一个bug,我认为这是问题的根源(而不是事件处理程序)。请查看我的答案并进行评论和/或更新您的问题。您可能会得到关于此答案的解决方案:@Robs,我的答案对您来说不是正确的答案吗?谢谢,老专业人士。我尝试创建一个缩略示例,并在其中留下了params
。我将删除更新。@Robs更新后请告诉我,我将采取另一个l现在我仍然看到params
错误。