Question

标题几乎都说明了这一点，因为这个错误只发生在Chrome（最新版本）中。

当使用Chrome时，它当前没有焦点，在使用两个显示器，然后单击Chrome中页面上加载的jVectorMap组件的某个区域时，只有当浏览器获得焦点时，才会触发单击，在这种情况下，通过第一次点击，第二次点击某个区域会触发onRegionClick事件。

有谁知道这是一个已知的Chrome错误还是导致问题的jVectorMap组件？

如果有，是否有解决方法？

*编辑：即使Chrome没有焦点，您也会注意到该组件的onRegionOver事件有效。

以下是此行动中的一个jsFiddle - http://jsfiddle.net/fFTzL/

我正在发布jVectorMap的初始化，但是可以在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

我们可以使用类似的东西：

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

当浏览器未对焦时，jVectorMap onRegionClick在Chrome中首次点击时不会触发

1 个答案: