leaflet - Using click and mouse events together -

i trying make map in 1 able hover on district highlight district give user option of clicking on district highlight in different color.

currently, mouseover/mouseout , click events work should. problem click highlight not reset mouseout event fired up.

here code have:

// action each feature of choropleth function oneachfeature(feature, layer) {     layer.on({             mouseover: highlight,             mouseout: resethighlight,             click: highlightselection     }); }  // highlight function highlights specific district function highlight(e) {     this.setstyle({         weight: 2,         opacity: 0.5,         color: '#666',         fillopacity: 0.5     }); }  // reset highlights after mouseout function resethighlight(e) {     geojson.resetstyle(e.target); }  // highlighting selected administrative area function highlightselection(e) {     e.target.setstyle({         weight: 2,         opacity: 0.5,         color: '#666',         fillopacity: 0.7     }); } 

my problem in resethighlight() reset style of whole map, not want keep click event highlight until district has been clicked on.

alright, got work. when user clicks on district , wants click on another, previous district not highlighted anymore. mouseover/mouseout events continue work throughout process.

here code:

// action each feature of choropleth function oneachfeature(feature, layer) {     layer.on({             mouseover: highlight,             mouseout: resethighlight,             click: highlightselection     }); } // highlight function highlights specific district function highlight(e) {     hoverid = this._leaflet_id;      // if statement used stop highlighting of clicked district     if(hoverid != clickid)     {         this.setstyle({             weight: 2,             opacity: 0.5,             color: '#666',             fillopacity: 0.5         });     }     else     {      } }  // reset highlights after mouseout function resethighlight(e) {     // if statement dehighlight after hovering     if(hoverid != clickid)     {         geojson.resetstyle(e.target);     }     // if statement dehighlight after click     else if(clickid != clickid2)     {         geojson.resetstyle(e.target);     } } // highlighting selected administrative area function highlightselection(e) {     // id used check if highlighted or not     clickid = this._leaflet_id;     if(firstpass == true)     {         resethighlight(previous);     }     previous = e;     // id compare clickid check if new click made     clickid2 = this._leaflet_id;      e.target.setstyle({         weight: 2,         opacity: 0.5,         color: '#666',         fillopacity: 0.7     });     firstpass = true; }