这个标题已经很清楚了,因为这个 bug 只出现在 Chrome(最新版本)中。在使用两个显示器时,如果 Chrome 没有焦点,并且点击加载在页面上的 jVectorMap 组件的某个区域,则该点击不会触发,只有当浏览器通过第一次点击获得焦点时,第二次点击区域才会触发 onRegionClick 事件。有人知道这是一个已知的 Chrome bug 还是 jVectorMap 组件引起的问题吗?如果是,有没有解决方法?*编辑:您会注意到,即使 Chrome 没有焦点,组件的 onRegionOver 事件仍然有效。这里有一个 jsFiddle 示例 - http://jsfiddle.net/fFTzL/。
我正在发布jVectorMap的初始化代码,但其他代码可以在jsFiddle中查看。
我正在发布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);
$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