Jquery – Leaflet different hover and click events

bindjqueryleafletmouseeventmouseover

I'm trying to give a popup for the mouse hover event instead of click on markers and do some some other stuff (e.g. a func) when it's get clicked.

My half successful code which I don't believe will help you think in that direction:

(I'm simply adding a hover on click event)

marker[i].on('mouseover', marker[i].bindPopup('hi').openPopup.bind(marker[i]));

[i] simply stands for a loop

Leaflet's API: http://leaflet.cloudmade.com/reference.html#map-openpopup

Best Answer

The following code shows a popup when the marker is moused over and does something else when the marker is clicked:

marker[i].on('mouseover', function(evt) {
  //evt.target is the marker that is being moused over 
  //bindPopup() does not need to be called here if it was already called
  //somewhere else for this marker.
  evt.target.bindPopup('hi').openPopup();
});
marker[i].on('click', function(evt) {
  //again, evt.target will contain the marker that was clicked
  console.log('you clicked a marker');
});

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

JQuery multiple events to trigger the same function

You can use .on() to bind a function to multiple events:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Or just pass the function as the parameter to normal event functions:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Best Answer

Related Solutions

Javascript – How to detect a click outside an element

JQuery multiple events to trigger the same function

Related Topic