Can't get removeEventListener working

[astralaaron]

Hello I've been messing around with a small script i've put together from reading various different turorials about drag and drop. I just cannot get removeEventListener to work.. Basically you can begin dragging but the element is stuck on the mouse and you cannot drop it. I've been able to set a variable to toggle on and off to stop it from dragging but I want to understand how to use removeEventListener incase I need it in the future. I appreciate any help.

 

I've posted all of the code at the following JS Fiddle, however for some reason the dragging won't work at all on JS Fiddle: (sorry I'm new to js fiddle)

 

http://jsfiddle.net/7wpxa4tm/

 

That exact same code does work for me on all browsers back to IE9. It will begin dragging, and then the remove listener which is in the "ignore" method just will not work. Does anyone see any obvious reason for this? I've been messing with this for two days, I've read around a bunch and thought that I realized my problem when I found that you can't use anonymous functions as callbacks as I was previously doing, but even after setting my callbacks to variables it still won't work.

 

Here is the code posted below if that is prefered:

 

EDIT: Sorry the problem is located in D.drag.release()

 

 

 

EDIT 2: JFiddle is now loading, had the onload setting wrong, now you can see the problem with the remove listener http://jsfiddle.net/7wpxa4tm/6/

var DragElement = function()  {var D = this;this.elem = null;this.offsetX = 0;this.offsetY = 0;		this.init = function() {		D.anch = document.getElementById('drag-anchor');		D.elem = document.getElementById('wig');		console.log('D.init()');				var call_back =  function(event) {			console.log('mousedown');			D.drag.anchor(event);		};		D.listen(D.anch, 'mousedown', call_back);		}	this.listen = function(elem, evt, handler) {		if (elem.addEventListener) {			elem.addEventListener(evt, handler, false);			return true;		} else if (elem.attachEvent) {			return elem.attachEvent('on' + evt, handler);		} else {			evt = 'on'+evt;			if(typeof elem[evt] === 'function'){				handler = (function(f1, f2){					return function(){						f1.apply(this, arguments);						f2.apply(this, arguments);					}				})(elem[evt], handler);			}			elem[evt] = handler;			return true;		}		return false;	}	this.ignore = function(elem, evt, handler) {	 if (elem.removeEventListener)  {		elem.removeEventListener (evt, handler, false);		}	 if (elem.detachEvent)  elem.detachEvent ('on'+evt, handler); 	}		this.drag = {		'dragging' : false,		'release' : function(event) {			//D.drag.dragging = false;  I can use this dragging boolean to control if it drags or not..but I want to know how to use the remove listener			/******** the following remove event method (ignore) will not work...*****/			var call_back =  function(event) {				D.drag.move(event);			};			D.ignore(D.anch, 'mousemove', call_back);		},		'anchor' : function(event){			D.drag.dragging = (D.drag.dragging) ? false : true;						D.offsetY = event.clientY-parseInt(D.elem.offsetTop);			D.offsetX = event.clientX-parseInt(D.elem.offsetLeft);			var call_back =  function(event) {				D.drag.move(event);			};			D.listen(D.anch, 'mousemove', call_back);		},		'move' : function(event) {			if(!D.drag.dragging) return;			D.elem.style.position = 'absolute';			var top = (event.clientY-D.offsetY);			var left = (event.clientX-D.offsetX);			D.elem.style.top =  top + 'px';			D.elem.style.left =  left + 'px';			var call_back =  function(event) {				D.drag.release(event);			};			D.listen(D.anch, 'mouseup', call_back);					}	}}var drag = new DragElement();drag.listen(window, 'load', function(event) {  drag.init(event);});

EDIT 2: JFiddle is now loading, had the onload setting wrong, now you can see the problem with the remove listener http://jsfiddle.net/7wpxa4tm/6/

 

Edit 3: I just tried returning the removeEventListener function and outputting it to the console, it is "undefined"

 

I guess the problem is how I am passing the function in, or saving the function, but I don't see a way to do it differently

Edited July 3, 2015 by astralaaron

[Ingolme]

When you call removeEventListener, the function you pass has to be exactly the same function as the one that was passed to addEventListener.

 

For example, this won't work because, while a and b do the same thing, they are still two different entities.

var a = function() { alert(1); };var b = function() { alert(1); };element.addEventListener("click", a, false);element.removeEventListener("click", b, false);

Just a note:

This is an unnecessary wrapping of a function:

var call_back = function(event) {  D.drag.move(event);};

While it results in a completely new and different function, its functionality is identical to this:

var call_back = D.drag.move;

And this is also likely to fix your removeEventListener problem, since now you're referring to the actual function and not the anonymous one it's wrapped in.

[astralaaron]

Ignolme, thank you so much my friend.