Losing event binding?

ionic-v1
1

I have a strange problem. I’ve added a Mapbox map to a view with programmatically added markers and popups. I’ve tried a few different methods to bind clicks on the markers in order to get my detail view. Here’s a snippet from my most recent test:

ionic.onGesture('click', function(e) {
	var property = e.target.options;
	layerOpt = e;

	if (markerShowing == property) {
		hidePropertyBrief();
	} else {
		showPropertyBrief(property);
	}
}, marker);

Initially, this works fine. I can navigate the map without issue and clicking the marker pops up the detail view as desired. However, if I click anything outside of the map (the nav bar, the tab bar, even the detail view), any subsequent clicks on the map will not fire. I can still scroll around the map but clicking on markers has no effect. It’s like the event binding is being unset but I don’t know why this would happen.

Suggestions?

2

I’ve thrown this into a codepen:

The title in the top header bar will update to reflect any event on the marker. Mouseover, mouseout, click, whatever - the title will update to reflect the event.

Click on the marker and you will see leafletDirectiveMarker.click which is what I expect it to show. But now click on the header bar then click the marker again. Other events still register on the marker, but click events no longer register. Mouseover, mouseout, even doubleclick wil register, but nothing is reported for single clicks.

Suggestions? Is there a better way to track events on a marker like this? Why am I losing my click event bindings?

3

I think this may actually be an issue with leaflet.

I removed ionic from the equation and still couldn’t move the maker

4

Not trying to move the marker, I don’t have it draggable. The problem is it stops registering click events when I click an ionic element outside the map. It works fine if I start by only interacting with the map. In your case, the click problem no longer happens - it registers the clicks on the marker no matter where else you click. This tends to confirm an Ionic issue.

5

Ah I see, try wrapping your leaflet directive with a div and this attribute.

 data-tap-disabled="true"
1 Like
6

Nice, that does the trick. Can you explain what that is doing?

7

Take a look

http://ionicframework.com/docs/api/page/tap/

2 Likes
8

I had a similar issue with using leaflet and ionic. Only the click event was being lost, other events were being passed through. I assumed it was my lousy coding.

I had simplified and simplified my code to try and work out what the problem was. I had just about gone down to a skeletal and found this. It solved my problem as well as kept my hair on :smile:

Thanks very much.