logo标签列表

jVectorMap在Chrome浏览器中失去焦点时，第一次点击不会触发onRegionClick事件

google-chromeonclickfocusjvectormap
3
这个标题已经很清楚了，因为这个 bug 只出现在 Chrome（最新版本）中。在使用两个显示器时，如果 Chrome 没有焦点，并且点击加载在页面上的 jVectorMap 组件的某个区域，则该点击不会触发，只有当浏览器通过第一次点击获得焦点时，第二次点击区域才会触发 onRegionClick 事件。有人知道这是一个已知的 Chrome bug 还是 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);
1个回答
5
我们可以使用类似这样的代码：
$map.on('click', function(e){
  if (~e.target.className.baseVal.indexOf('jvectormap-region')) {
    ..
  }
});
我会尝试，谢谢。我会在这里再次发布我的发现。 - S.Tarr
1
你的建议很有用！不幸的是，我没有积分可以给你点赞，而且也没有其他答案可以投票反对。 ;)这就是我最终采取的做法，其中regionCheck、regionClick和closeMapPopup是我创建的单独函数，以实现我想要的结果。$map.on('click', function(e) { if (~e.target.className.baseVal.indexOf('jvectormap-region')) { code = $(e.target).attr("data-code").toLowerCase(); var content = regionCheck(code,"region"); if (content) { regionClick(code, content); } else { closeMapPopup(); return false; } } }); - S.Tarr
感谢让我研究波浪号（“~”）运算符。这是一个很好的用法（也许是为数不多的用法之一），可以避免在表达式中使用其他比较运算符。http://www.joezimjs.com/javascript/great-mystery-of-the-tilde/ - Neil Monroe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接