我有一个带有运行Javascript + jQuery函数的链接的SVG图像。在Chrome中，链接按预期工作。但是，在IE9中，单击circle时没有任何反应。我向alert();添加了一个mousedown函数，它看到了点击，该函数没有运行。该页面位于http://northviewhigh.com/index/graduation/tickets/select.php?s=s1，我已将下面的相应代码隔离开来。
SVG：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="268px"
height="95px" viewBox="0 0 268 95" enable-background="new 0 0 268 95" xml:space="preserve" id="seatchart">
<g id="bg">
<path fill="#FECB2F" stroke="#000000" d="M267.5,85.5c0,4.971-4.029,9-9,9H9.5c-4.971,0-9-4.029-9-9v-76c0-4.971,4.029-9,9-9h249c4.971,0,9,4.029,9,9V85.5z"/>
</g>
<g id="Layer_1">
<g id="sectionE">
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="255.136" cy="83.833" r="6.302" title="E16" id="e16" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="238.847" cy="83.833" r="6.302" title="E15" id="e15" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="222.558" cy="83.833" r="6.302" title="E14" id="e14" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="206.269" cy="83.833" r="6.302" title="E13" id="e13" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="189.98" cy="83.833" r="6.302" title="E12" id="e12" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="173.692" cy="83.833" r="6.302" title="E11" id="e11" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="157.403" cy="83.833" r="6.302" title="E10" id="e10" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="141.114" cy="83.833" r="6.302" title="E09" id="e09" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="124.825" cy="83.833" r="6.302" title="E08" id="e08" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="108.536" cy="83.833" r="6.302" title="E07" id="e07" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="92.247" cy="83.833" r="6.302" title="E06" id="e06" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="75.958" cy="83.833" r="6.302" title="E05" id="e05" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="59.669" cy="83.833" r="6.302" title="E04" id="e04" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="43.38" cy="83.833" r="6.302" title="E03" id="e03" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="27.092" cy="83.833" r="6.302" title="E02" id="e02" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="10.802" cy="83.833" r="6.302" title="E01" id="e01" />
</g>
<g id="sectionD">
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="255.111" cy="66.167" r="6.302" title="D16" id="d16" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="238.822" cy="66.167" r="6.302" title="D15" id="d15" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="222.533" cy="66.167" r="6.302" title="D14" id="d14" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="206.244" cy="66.167" r="6.302" title="D13" id="d13" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="189.955" cy="66.167" r="6.302" title="D12" id="d12" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="173.667" cy="66.167" r="6.302" title="D11" id="d11" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="157.378" cy="66.167" r="6.302" title="D10" id="d10" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="141.089" cy="66.167" r="6.302" title="D09" id="d09" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="124.8" cy="66.167" r="6.302" title="D08" id="d08" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="108.511" cy="66.167" r="6.302" title="D07" id="d07" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="92.222" cy="66.167" r="6.302" title="D06" id="d06" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="75.933" cy="66.167" r="6.302" title="D05" id="d05" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="59.644" cy="66.167" r="6.302" title="D04" id="d04" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="43.355" cy="66.167" r="6.302" title="D03" id="d03" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="27.067" cy="66.167" r="6.302" title="D02" id="d02" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="10.778" cy="66.167" r="6.302" title="D01" id="d01" />
</g>
<g id="sectionC">
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="255.111" cy="48.5" r="6.302" title="C16" id="c16" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="238.822" cy="48.5" r="6.302" title="C15" id="c15" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="222.533" cy="48.5" r="6.302" title="C14" id="c14" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="206.244" cy="48.5" r="6.302" title="C13" id="c13" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="189.955" cy="48.5" r="6.302" title="C12" id="c12" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="173.667" cy="48.5" r="6.302" title="C11" id="c11" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="157.378" cy="48.5" r="6.302" title="C10" id="c10" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="141.089" cy="48.5" r="6.302" title="C09" id="c09" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="124.8" cy="48.5" r="6.302" title="C08" id="c08" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="108.511" cy="48.5" r="6.302" title="C07" id="c07" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="92.222" cy="48.5" r="6.302" title="C06" id="c06" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="75.933" cy="48.5" r="6.302" title="C05" id="c05" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="59.644" cy="48.5" r="6.302" title="C04" id="c04" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="43.355" cy="48.5" r="6.302" title="C03" id="c03" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="27.067" cy="48.5" r="6.302" title="C02" id="c02" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="10.778" cy="48.5" r="6.302" title="C01" id="c01" />
</g>
<g id="sectionB">
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="256.179" cy="30.167" r="6.302" title="B16" id="b16" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="239.89" cy="30.167" r="6.302" title="B15" id="b15" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="223.602" cy="30.167" r="6.302" title="B14" id="b14" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="207.313" cy="30.167" r="6.302" title="B13" id="b13" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="191.024" cy="30.167" r="6.302" title="B12" id="b12" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="174.735" cy="30.167" r="6.302" title="B11" id="b11" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="158.446" cy="30.167" r="6.302" title="B10" id="b10" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="142.157" cy="30.167" r="6.302" title="B09" id="b09" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="125.868" cy="30.167" r="6.302" title="B08" id="b08" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="109.579" cy="30.167" r="6.302" title="B07" id="b07" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="93.29" cy="30.167" r="6.302" title="B06" id="b06" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="77.002" cy="30.167" r="6.302" title="B05" id="b05" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="60.713" cy="30.167" r="6.302" title="B04" id="b04" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="44.424" cy="30.167" r="6.302" title="B03" id="b03" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="28.135" cy="30.167" r="6.302" title="B02" id="b02" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="11.846" cy="30.167" r="6.302" title="B01" id="b01" />
</g>
<g id="sectionA">
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="256.155" cy="12.5" r="6.302" title="A16" id="a16" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="239.865" cy="12.5" r="6.302" title="A15" id="a15" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="223.577" cy="12.5" r="6.302" title="A14" id="a14" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="207.288" cy="12.5" r="6.302" title="A13" id="a13" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="190.999" cy="12.5" r="6.302" title="A12" id="a12" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="174.71" cy="12.5" r="6.302" title="A11" id="a11" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="158.421" cy="12.5" r="6.302" title="A10" id="a10" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="142.132" cy="12.5" r="6.302" title="A09" id="a09" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="125.844" cy="12.5" r="6.302" title="A08" id="a08" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="109.554" cy="12.5" r="6.302" title="A07" id="a07" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="93.265" cy="12.5" r="6.302" title="A06" id="a06" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="76.977" cy="12.5" r="6.302" title="A05" id="a05" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="60.688" cy="12.5" r="6.302" title="A04" id="a04" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="44.399" cy="12.5" r="6.302" title="A03" id="a03" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="28.11" cy="12.5" r="6.302" title="A02" id="a02" />
<circle fill="#E6E6E6" stroke="#000000" stroke-width="0.25" class="seatcircle" cx="11.821" cy="12.5" r="6.302" title="A01" id="a01" />
</g>
</svg>
JS + JQ：
$(document).ready(function() {
$('.seatcircle').tipTip({
defaultPosition: "top",
delay: 100,
edgeOffset: 1
});
/** ** ** ** Variables ** ** ** **/
var selectedType;
var sectionLetter;
var lastSeat;
var lastLetter;
var dashIndex;
/** ** ** ** Color Changing ** ** ** **/
function seatSelect(seat) {
if (lastSeat != null) {
$('#section' + lastLetter + ' #' + lastSeat).attr("fill", "#E6E6E6");
}
sectionLetter = seat.charAt(0).toUpperCase();
console.log(seat);
console.log(sectionLetter);
$('#section' + sectionLetter + ' #' + seat).attr("fill", "#006837"); // change to green
lastSeat = seat;
lastLetter = sectionLetter;
$('input#seatin').attr("value", seat);
$('#selectedseat').html(seat.toUpperCase());
$('#submitbutton').removeAttr("disabled");
}
/** ** ** ** Pageload Stuff ** ** ** **/
$('#selectedsection').html(selectedParam.toUpperCase());
$('input#sectionin').attr("value", selectedParam);
if (selectedParam.indexOf("g") == 0) {
selectedType = "guest";
$('#bg path').attr("fill", "#3333CC");
$('.seatcircle').attr("stroke", "#FFFFFF");
}
else if (selectedParam.indexOf("s") == 0) {
selectedType = "stud";
$('#bg path').attr("fill", "#FECB2F");
}
else {
window.location = "index.php";
}
$('circle.seatcircle').click(function() {
if ($(this).hasClass("seattaken")){
alert("That seat is taken. Please select another.");
}
else {
seatSelect($(this).attr("id"));
}
});
}); //document ready end