question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DomEvent.off() not working correctly when called with one parameter

See original GitHub issue

How to reproduce

  • Leaflet version I’m using: 1.3.0
  • Browser (with version) I’m using: Chome 63.0.3239.132
  • OS/Platform (with version) I’m using: Linux
  • Assing event handler on an element using DomEvent.on(element, ‘eventType’, callback)
  • Remove all event handlers from element using DomEvent.off(element)
  • Expect that after firing event, the callback will not be executed. (It is not working)

Minimal example reproducing the issue

var div = document.getElementById('leaflet');
var eventHandler = function(){
  alert('Handler fired!');
}
L.DomEvent.on(div, 'click', eventHandler);
L.DomEvent.off(div);
//now manually click on div element -> alert is shown

https://plnkr.co/edit/yQ1GzAFD9oDNqnV0Nhok?p=preview

Possible solution

I think that problem is in DomEvent.js

export function off(obj, types, fn, context) {
(...)
	} else {
		for (var j in obj[eventsKey]) {
                        //this does nothing cause j variable is not parsed
			removeOne(obj, j, obj[eventsKey][j]);
		}
		delete obj[eventsKey];
	}
(...)

In this case j is a key which isn’t event type. It is a event handler id (e.g. resize37_35) In order to fix it, j= j.replace(/[^a-z]/g, '') or something similar.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
IvanSanchezcommented, Jan 19, 2018

~~~I think you should use `map.on(...)` instead of `L.DomEvent.on(map, ...)`. Or, if deemed necessary, `L.ComEvent.on(map.getContainer(), ... )`. Note how, according to the documentation, the return type of `getContainer` is an `HTMLElement`.~~~
0reactions
johnd0ecommented, May 5, 2020

the docs no longer claim this is possible.

But our code still has some code trying to handle this case: https://github.com/Leaflet/Leaflet/blob/ec35ab52f66c191f7c855583354722c40dcdf239/src/dom/DomEvent.js#L30-L36

As mentioned by @IvanSanchez this code fails. So we need either to remove it completely, or fix it (which is easy too).

Read more comments on GitHub >

github_iconTop Results From Across the Web

simple javascript JS event handler not working correctly
var answer = true; // Create a function called loadQuestion() that ... called checkAnswer(userAnswer) that takes one incoming parameter.
Read more >
EventTarget.addEventListener() - Web APIs | MDN
The method addEventListener() works by adding a function, ... the callback accepts a single parameter: an object based on Event describing ...
Read more >
Leaflet L.DomEvent.On returning an error on marker click
And obviously, as you're only passing one parameter to L. DomEvent. on , it's missing the second and third, and throws some errors...
Read more >
The 10 Most Common JavaScript Issues Developers Face
If you need help figuring out why your JavaScript isn't working, consult this list of the 10 most common JavaScript issues from a...
Read more >
Anomalies in JavaScript arrow functions - LogRocket Blog
Personally, I think arrow functions are one of the most awesome syntax ... The logParams() function is defined with three named parameters: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found