Keep Click function the same until second click

Question

Problem: When i click on a item (in my case a state) the perimeter turns black, however if I move the cursor away it reverts back to grey.

Question: How do I make it so that the black perimeter stays on until I click another item or that same item a second time?

Code:

function clickFeature(e) {
var layer = e.target;
info.update(layer.feature.properties);
layer.setStyle({

            color: '#000',

        });
}
    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);

    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: clickFeature,



        });
    }



    geojson = L.geoJson(statesData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

Answer 1

I think, you can change the code to focus instead of click .

The focus stays on the element until you click somewhere else.

So, if you're using JavaScript. Then change the event to

<element onfocus="clickFeature()"></element>

Now, when the element would gain focus (click, tab focus etc) then the element will be black until or unless you click somewhere else on the document (page).