离开页面之前删除事件侦听器 [英] Removing event listeners before leaving a page
问题描述
我已经开发了一个JavaScript拖放程序,该程序主要使用标准的"allowdrop","drag"和"drop"事件.
I've developed a javascript drag and drop that mostly uses the standard 'allowdrop', 'drag' and 'drop' events.
我想自定义重影"的拖动对象,因此我添加了display:none div,其中填充了可拖动元素的innerHTML并在用户开始拖动时使其可见(display:block;).
I wanted to customise the 'ghosted' dragged object, so I've added a display:none div that get populated with the innerHTML of the draggable element and made visible (display:block;) when the user starts dragging.
可拖动div绝对定位并与鼠标移动匹配.为此,我需要向document.body添加3个事件侦听器.它们如下:
The draggable div is absolutely positioned and matches the mouse movements. For this I needed to add 3 event listeners to document.body. They are as follows:
document.body.addEventListener('dragover', function (ev) {
console.log("dragover event triggered");
ev = ev || window.event;
ev.preventDefault();
dragX = ev.pageX;
dragY = ev.pageY;
document.getElementById("dragged-container").style.left = (dragX - dragOffsetX) + "px";
document.getElementById("dragged-container").style.top = (dragY - dragOffsetY - 10) + "px";
if (mostRecentHoveredDropTargetId!="") {
if (dragX<mostRecentHoveredDropTargetRect.left || dragX>mostRecentHoveredDropTargetRect.right || dragY<mostRecentHoveredDropTargetRect.top || dragY>mostRecentHoveredDropTargetRect.bottom) {
document.getElementById(mostRecentHoveredDropTargetId).classList.remove("drop-target-hover");
mostRecentHoveredDropTargetId = "";
}
}
});
document.body.addEventListener('drop', function (ev) {
console.log("drop event triggered");
ev.preventDefault();
var data = ev.dataTransfer.getData("text"); // data set to the id of the draggable element
if (document.getElementById(data)!=null) {
document.getElementById(data).classList.remove("dragged");
document.getElementById("dragged-container").innerHTML = "";
document.getElementById("dragged-container").style.display = "none";
var draggablesClasses = document.getElementById(data).className;
if ((draggablesClasses.indexOf('draggable')==-1 || draggablesClasses=="") && document.getElementById(data).getAttribute('draggable')=="true") {
if (draggablesClasses=="") {
document.getElementById(data).className += "draggable";
} else {
document.getElementById(data).className += " draggable";
}
}
}
});
// resets dragged-container and origin .draggable, when mouse released outside browser window
document.body.addEventListener('mouseleave', function (ev) {
if (jqueryReady==true) {
$(".dragged").addClass("draggable");
$(".dragged").removeClass("dragged");
}
document.getElementById("dragged-container").innerHTML = "";
document.getElementById("dragged-container").style.display = "none";
});
一切正常.拖放操作完全符合我的预期.
问题是当我转到另一个页面时,显然那些主体事件侦听器仍在运行.
The problem is when I go to another page, obviously those body event listeners are still running.
我在这里看到了很多答案,并尝试了我所看到的一切.对于初学者来说:
I've seen a number of answers here and have tried everything I've seen. For starters this:
window.onunload = function() {
console.log("about to clear event listeners prior to leaving page");
document.body.removeEventListener('dragover', null);
document.body.removeEventListener('drop', null);
document.body.removeEventListener('mouseleave', null);
return;
}
...但是console.log输出甚至都没有出现(我敢肯定,'null'是错误的).我也在jQuery ready函数中尝试过此操作:
...but the console.log output doesn't even appear (let alone the 'null's being wrong, I'm pretty sure). I've also tried this, in the jQuery ready function:
$(window).bind('beforeunload', function(){
console.log("about to clear event listeners prior to leaving page");
document.body.removeEventListener('dragover', null);
document.body.removeEventListener('drop', null);
document.body.removeEventListener('mouseleave', null);
});
..但是,控制台再次没有收到该输出.
..but, once again, the console isn't even receiving that output.
我也用'onbeforeunload'和'onunload'尝试了以上两种方法.
I have also tried both the above with 'onbeforeunload' AND 'onunload'.
我做错了什么? -特别是与删除这些window.body事件侦听器有关(我以后可以解决的其他问题).
What am I doing wrong? - specifically to do with removing these window.body event listeners, I mean (Anything else I can sort out later).
谢谢.
推荐答案
removeEventListener需要处理程序
不使用匿名函数是解决方案. 像这样:
Don't use anonymous functions is the solution. Like this:
var dragHandler = function (ev) {
console.log("dragover event triggered");
};
document.body.addEventListener('dragover', dragHandler);
及之后:
window.onunload = function() {
console.log("about to clear event listeners prior to leaving page");
document.body.removeEventListener('dragover', dragHandler);
return;
}
这篇关于离开页面之前删除事件侦听器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!