[GIS] Leaflet DomEvent.addListener – why doesn’t ‘click’ work, but ‘dblclick’,’mouseout’,’mouseover’ do

Question

I tried to edit this Leaflet Geocoder Plugin in order to add an "X" close button to collapse the expanded geocoder div.

The plugin normally works like this: demo.

I have fiddled around with it, and now it looks like this: jsFiddle (line 56-57)

My edits include creating a submit button..

var xclose = document.createElement('input');
xclose.type = "submit";
xclose.value = 'X';
form.appendChild(xclose);

..and changing the listeners from:

L.DomEvent.addListener(container, 'mouseover', this._expand, this);
L.DomEvent.addListener(container, 'mouseout', this._collapse, this);

to:

L.DomEvent.addListener(container, 'click', this._expand, this);
L.DomEvent.addListener(xclose, 'click', this._collapse, this); //doesn't work

Question:

Why doesn't L.DomEvent.addListener(xclose, 'click', this._collapse, this); work, but the other click events do?

L.DomEvent.addListener(xclose, 'dblclick', this._collapse, this); //works
L.DomEvent.addListener(xclose, 'mouseout', this._collapse, this); //works
L.DomEvent.addListener(xclose, 'mouseover', this._collapse, this); //works

Could it be because of L.DomEvent.disableClickPropagation(container);? If so, how can I make it work? I tried removing that line, but nothing happened.

Answer 1

adding
L.DomEvent.addListener(xclose, 'click', L.DomEvent.stop);
before the other listeners have the desired effect. The geocoder extension has a default behavior for click event and the above command stops the default click behavior.See jsFiddle line 56