jVectorMap onRegionClick not firing on first click in Chrome when browser is not in focus

Question

The title pretty much says it all as this bug only happens in Chrome (the latest version).

When using Chrome and it does not currently have the focus, while using two monitors, and then clicking on a region of the jVectorMap component loaded on a page in Chrome, the click does not fire, only when the browser gains focus, in this case through means of the first click, does the second click on a region fire the onRegionClick event.

Does anyone know if this is a known Chrome bug or is it the jVectorMap component causing the problem?

If so, is there is fix for this?

*Edit: You will notice that the component's onRegionOver event works even when Chrome does not have focus.

Here is a jsFiddle of this in action - http://jsfiddle.net/fFTzL/

---

I'm posting the initialistaion for the jVectorMap but the additional code can be seen in the jsFiddle.

    $map = $('.map');
    var map = new jvm.WorldMap({
        map: 'world_mill_en',
        container: $map,
        normalizeFunction: 'polynomial',
        zoomButtons: false,
        zoomOnScroll: false,
        hoverOpacity: 1,
        hoverColor: false,
        backgroundColor: '#fff',
        regionStyle: {
            initial: {
                fill: '#cdcccc',
                    "fill-opacity": 1,
                stroke: 'white',
                    "stroke-width": 0,
                    "stroke-opacity": 1
            },
            hover: {
                "fill-opacity": 1
            },
            selected: {
                fill: '#6eab24'
            }
        },
        series: {
            regions: [{
                attribute: 'fill'
            }]
        },
        regionsSelectable: true,
        regionsSelectableOne: true,
        onRegionLabelShow: function (event, label, code) {
            code = code.toLowerCase();
            var content = regionCheck(code, "region");
            if (content) {
                label.css('left', -200);
                $("path", $(this)).css("cursor", "pointer");
            } else {
                event.preventDefault();
                label.text("");
                $("path", $(this)).css("cursor", "default");
            }
        },
        onRegionOver: function (event, code) {
            map.clearSelectedRegions();
            code = code.toLowerCase();
            var content = regionCheck(code);
            if (content) {
                regionCode = code;
                map.setSelectedRegions([code.toUpperCase()]);
            }
        },
        onRegionOut: function (event, code) {
            map.clearSelectedRegions();
            code = code.toLowerCase();
            var content = regionCheck(code);
            if (content) {
                map.setSelectedRegions([code.toUpperCase()]);
            } else {
                return false;
            }
            regionCode = '';
        },
        onRegionClick: function (event, code) {
            alert("Country clicked");
        }
    });
    map.series.regions[0].setValues(colors);

Answer 1

We can use something like:

$map.on('click', function(e){
  if (~e.target.className.baseVal.indexOf('jvectormap-region')) {
    ..
  }
});