我正在使用Raphael.js在美国地图上工作，您可以在此处查看：http://www.motionflashdesigns.com/usabbr/
我已经开始使用set（）添加状态缩写，因此状态路径和文本缩写都在同一个对象中。
我在整个集合对象上添加了一个鼠标悬停事件处理程序，但是子文本也将鼠标注册到事件上，这有效地导致鼠标在集合上，任何人都知道如何停止在集合子集上传播事件？
在jquery中我会使用mouseenter或event.stopPropagation，但这些似乎都不支持拉斐尔。
这是JS：
$(function () {
var stateNames = new Array();
var stateURLs = new Array();
var stateModes = new Array();
var stateColors = new Array();
var stateOverColors = new Array();
var stateClickedColors = new Array();
var stateText = new Array();
var offColor;
var strokeColor;
var mapWidth;
var mapHeight;
var useSideText;
var textAreaWidth;
var textAreaPadding;
var mouseX = 0;
var mouseY = 0;
var current = null;
// Detect if the browser is IE.
var IE = $.browser.msie ? true : false;
$.ajax({
type: 'GET',
url: 'xml/usaMapSettings.xml',
dataType: $.browser.msie ? 'text' : 'xml',
success: function (data) {
var xml;
if ($.browser.msie) {
xml = new ActiveXObject('Microsoft.XMLDOM');
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
var $xml = $(xml);
offColor = '#' + $xml.find('mapSettings').attr('offColor');
strokeColor = '#' + $xml.find('mapSettings').attr('strokeColor');
mapWidth = $xml.find('mapSettings').attr('mapWidth');
mapHeight = $xml.find('mapSettings').attr('mapHeight');
useSideText = $xml.find('mapSettings').attr('useSideText');
textAreaWidth = $xml.find('mapSettings').attr('textAreaWidth');
textAreaPadding = $xml.find('mapSettings').attr('textAreaPadding');
if (useSideText == 'true') {
$("#text").css({
'width': (parseFloat(textAreaWidth) - parseFloat(textAreaPadding * 2)) + 'px',
'height': (parseFloat(mapHeight) - parseFloat(textAreaPadding * 2)) + 'px',
'display': 'inline',
'float': 'right',
'padding': textAreaPadding + 'px'
});
$('#text').html($xml.find('defaultSideText').text());
}
//Parse xml
$xml.find('stateData').each(function (i) {
var $node = $(this);
stateText.push($node.text());
stateNames.push($node.attr('stateName'));
stateURLs.push($node.attr('url'));
stateModes.push($node.attr('stateMode'));
stateColors.push('#' + $node.attr('initialStateColor'));
stateOverColors.push('#' + $node.attr('stateOverColor'));
stateClickedColors.push('#' + $node.attr('stateSelectedColor'));
});
createMap();
}
});
function createMap() {
//start map
var r = new ScaleRaphael('map', 930, 590),
attributes = {
fill: '#d9d9d9',
cursor: 'pointer',
stroke: strokeColor,
'stroke-width': 1,
'stroke-linejoin': 'round',
'font-family':'Verdana',
'font-size':'19px',
'font-weight': 'bold'
},
arr = new Array();
var usa = {};
usa.alabama = r.set();
usa.alaska = r.set();
usa.arizona = r.set();
usa.arkansas = r.set();
usa.california = r.set();
usa.colorado = r.set();
usa.connecticut = r.set();
usa.delaware = r.set();
usa.dc = r.set();
usa.florida = r.set();
usa.georgia = r.set();
usa.hawaii = r.set();
usa.idaho = r.set();
usa.illinois = r.set();
usa.indiana = r.set();
usa.iowa = r.set();
usa.kansas = r.set();
usa.kentucky = r.set();
usa.louisiana = r.set();
usa.maine = r.set();
usa.maryland = r.set();
usa.massachusetts = r.set();
usa.michigan = r.set();
usa.minnesota = r.set();
usa.mississippi = r.set();
usa.missouri = r.set();
usa.montana = r.set();
usa.nebraska = r.set();
usa.nevada = r.set();
usa.newHampshire = r.set();
usa.newJersey = r.set();
usa.newMexixo = r.set();
usa.newYork = r.set();
usa.northCarolina = r.set();
usa.northDakota = r.set();
usa.ohio = r.set();
usa.oklahoma = r.set();
usa.oregon = r.set();
usa.pennsylvenia = r.set();
usa.rhodeIsland = r.set();
usa.southCarolina = r.set();
usa.southDakota = r.set();
usa.tennessee = r.set();
usa.texas = r.set();
usa.utah = r.set();
usa.vermont = r.set();
usa.virginia = r.set();
usa.washington = r.set();
usa.westVirginia = r.set();
usa.wisconsin = r.set();
usa.wyoming = r.set();
var boxattrs = {'cursor': 'pointer', 'fill' : "#000"};
var i = 0;
for (var state in usamappaths) {
//Create obj
var obj = usa[state];
obj.attr(attributes);
if (stateModes[i] == 'OFF') {
boxattrs = {'cursor': 'default', 'fill' : offColor};
} else {
boxattrs = {'cursor': 'pointer', 'fill' : stateColors[i], 'id' : i};
}
obj.push(r.path(usamappaths[state].path).attr(boxattrs));
obj.push(r.text(usamappaths[state].textX, usamappaths[state].textY, usamappaths[state].text).attr(
{"font-family":"Arial, sans-serif",
"font-weight":"bold",
"font-size":"14",
"font-color":"#000",
'cursor': 'pointer'}));
obj[0].node.id = i;
obj.mouseover(function (e) {
e.stopPropagation();
var id = $(this.node).attr('id');
if (stateModes[id] != 'OFF') {
//Animate if not already the current state
if (this != current) {
this.animate({
fill: stateOverColors[id]
}, 500);
}
//tooltip
$('#map').next('.point').remove();
$('#map').after($('<div />').addClass('point'));
$('.point').html(stateNames[id]).css({
left: mouseX - 50,
top: mouseY - 70
}).fadeIn();
}
});
obj.mouseout(function (e) {
var id = $(this.node).attr('id');
if (stateModes[id] != 'OFF') {
//Animate if not already the current state
if (this != current) {
this.animate({
fill: stateColors[id]
}, 500);
}
$('#map').next('.point').remove();
}
});
obj.mouseup(function (e) {
var id = $(this.node).attr('id');
if (stateModes[id] != 'OFF') {
//Reset scrollbar
var t = $('#text')[0];
t.scrollLeft = 0;
t.scrollTop = 0;
//Animate previous state out
if (current) {
var curid = $(current.node).attr('id');
current.animate({
fill: stateColors[curid]
}, 500);
}
//Animate next
this.animate({
fill: stateClickedColors[id]
}, 500);
current = this;
if (useSideText == 'true') {
$('#text').html(stateText[id]);
} else {
//change "_self" to "_blank" if using in WP iframe
window.open(stateURLs[id], '_self');
}
}
});
i++;
}
resizeMap(r);
/*
//Might use that for east coast states
var t = r.text(120, 50, "WA").attr(
{"font-family":"Arial, sans-serif",
"font-weight":"bold",
"font-size":"14",
"font-color":"#000",
"pointer-events":"none",
'disabled': 'true'});
var rect = r.rect(t.getBBox().x,t.getBBox().y,t.getBBox().width,t.getBBox().height).attr({'cursor': 'pointer'});
*/
}
// Set up for mouse capture
if (document.captureEvents && Event.MOUSEMOVE) {
document.captureEvents(Event.MOUSEMOVE);
}
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
var scrollTop = $(window).scrollTop();
if (e && e.pageX) {
mouseX = e.pageX;
mouseY = e.pageY-scrollTop;
} else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
// catch possible negative values
if (mouseX < 0) {
mouseX = 0;
}
if (mouseY < 0) {
mouseY = 0;
}
$('#map').next('.point').css({
left: mouseX - 50,
top: mouseY - 70
})
}
// Set-up to use getMouseXY function onMouseMove
document.body.onmousemove = getMouseXY;
function resizeMap(paper) {
paper.changeSize(mapWidth, mapHeight, true, false);
if (useSideText == 'true') {
$(".mapWrapper").css({
'width': (parseFloat(mapWidth, 10) + parseFloat(textAreaWidth, 10)) + 'px',
'height': mapHeight + 'px'
});
} else {
$(".mapWrapper").css({
'width': mapWidth + 'px',
'height': mapHeight + 'px'
});
}
}
});
答案 0 :(得分：0)
您应该使用mouseenter和mouseleave事件而不是mouseover和mouseout。
答案 1 :(得分：0)
答案 2 :(得分：0)
我不确定这里究竟是什么问题，但如果我理解正确你试图影响该区域而不影响文本。我解决这个问题的方法是将两个元素推到一起
var North_Text = paper.set();
North_Text.push(
paper.text(80, 40, 'Dartford'),
paper.circle(75, 32, 3)
);
North_Text.attr({
id: 'North_Text',
}).data('id', 'North_Text');
var North_Kent = paper.set();
var North = paper.circle(75, 32, 300);
North.attr({id: 'West',parent: 'North_Kent'}).data('id', 'North');
North_Kent.attr({'id': 'North_Kent','name': 'North_Kent'});
North_Kent.push(North,North_Text);
然后使用此功能独立于文本影响区域。我非常肯定我从过去的东西中调整了这个并调整它以适应变量函数，所以我可以将它放在for循环中并在数组中生成多个对象。
// Variable function "theEndFunction"
var theEndFunction = function(areaGroups,area){
areaGroups.mouseover(function(){
area.attr({"fill":"#099f1d"});
area.animate({ stroke: "#099f1d", 'stroke-width': 2, opacity: .75 }, 1000, 'elastic');
if(Raphael.type != 'VML')
areaGroups.toFront();
});
areaGroups.mouseout(function(){
area.attr({"fill":"#39B54A"});
area.stop().animate({ stroke: "#39B54A", 'stroke-width': 0, opacity: .75 }, 1000, 'elastic');
});
}
theEndFunction(North_Kent,North);
我希望这在某种程度上有所帮助，如果我稍后有机会，我会尝试抛弃小提琴