在IE中不触发SVG和jQuery鼠标事件

SVG and jQuery mouse event not triggered in IE

本文关键字:jQuery 鼠标 事件 SVG IE      更新时间:2023-09-26

我们有一个包含多个区域的SVG地图,每当一个区域悬停时,一个特殊的jQuery动作将发生。不幸的是,这在IE中不起作用(在IE11中测试)。

我能够以一种简化的方式复制这个。你可以在这里看看这个FIDDLE(在除IE以外的任何地方都可以使用)。

下面是示例html:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="700px" height="689px" viewBox="0 0 835 689" enable-background="new 0 0 835 689" xml:space="preserve">
    <path class="path" fill="none" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="3.8637" d="M359.537,407.389
                        l-0.049-0.283l0.055-0.34l0.336-0.424l1.043-0.256l0.389-0.312l0.443-0.65l0.193-0.51l0.461-0.565l0.406-1.133l0.125-0.198
                        l0.229-0.113h0.62l0.495-0.17l0.867-0.509l0.318-0.312l0.12-1.172l-0.297-2.273c0,0-0.298-0.988-0.298-1.779s0-1.582,0.595-1.978
                        c0.593-0.396,0.89-1.483,0.988-2.374c0.101-0.891,0.297-3.264,0.297-3.264l1.682,2.177l2.967,0.593l0.89,0.791
                        c0,0,0.791,1.188,0.791,1.979s2.177,2.473,2.571,2.867c0.396,0.396,1.879-0.296,1.879-0.296s0.1-1.483-0.198-1.979
                        c-0.297-0.494,0-1.385,0.198-1.879c0.197-0.494,1.014-1.83,1.014-1.83l-0.106-3.85l-3.774-0.648c0,0,0.1-2.274,0.198-3.065
                        c0.1-0.791-0.691-2.67-0.691-2.67l1.482-2.373h1.582l0.1-1.583l-1.682-1.482l2.771-2.176l1.879,1.188h0.691l0.792-0.396l1.766,0.644
                        l0.672,0.056l0.248-0.056l1.167-0.538l0.603-0.454l0.425-0.565l0.105-0.312l0.371-0.341l0.229-0.112l0.23,0.142l0.104,0.198
                        l0.248,0.765l0.247-0.027l0.143-0.198l0.302-0.878l0.282-0.369h0.317l0.637,0.482l0.318,0.057l0.479-0.229l0.563-0.904l-0.069-0.283
                        l-0.143-0.197l-0.068-0.254v-0.312l0.529-1.02l0.071-0.255l-0.052-0.368l-0.196-0.367l0.089-0.312l0.214-0.113l1.149,0.68
                        l2.211,0.058l0.461-0.255l0.742-1.047l0.229-0.115l0.583,0.085l1.132,0.681l0.319,0.084l0.743-0.254l0.854-0.566l0.014-0.086
                        l0.104-0.479l0.055-1.896l-0.46-1.189l-0.144-0.197l-0.177-0.51l-0.123-0.197l-0.23-1.047l0.194-0.623l0.144-0.199l0.388-0.281
                        l0.566-0.029l0.798-0.169l0.405-0.34l0.3-0.396l0.248-0.511l0.178-0.169l0.105-0.283l0.266-0.425l0.178-0.196l0.124-0.596v-1.02
                        l0.124-1.303l0.07-0.312l0.478-1.076l0.054-0.312c0,0,1.321-0.743,1.915-1.336c0.593-0.594,0.593-2.178,0.593-2.178l0.396-2.273
                        l1.484-1.088l1.283,0.1l-0.691-3.164l-0.1-2.176l-1.978,0.791l-1.541-0.253l-0.023-1.245l0.04-0.624l0.302-1.244l0.267-1.67
                        l0.034-0.991l-0.07-0.878l-0.159-0.168l-1.573-0.681l-0.708-0.707l-0.105-0.227l-0.036-0.284l0.019-0.649l0.159-0.595l0.425-0.737
                        l0.213-0.17l0.069-0.281l-1.434-2.322l-0.193-0.197l-0.442-0.142l-0.07-0.879l-0.282-1.046l0.054-0.341l0.177-0.226l0.212-0.057
                        l0.441-0.312l0.727-1.049l0.53-0.536l0.796-0.538l0.566-0.169l0.866-0.058l0.372,0.058l2.265,1.074l1.079,0.396l0.619,0.197
                        l1.646,0.198l0.619,0.17l0.229,0.142l0.336,0.368l0.727,0.368l0.674,0.453l0.282,0.084l0.266-0.113l0.123-0.228l0.283-0.877
                        l0.229-0.142l0.23-0.028l0.301,0.086l0.282-0.029l0.07-0.68l0.143-0.254l1.236,0.113l0.248-0.058l0.178-0.197l0.07-0.935
                        l-0.036-1.188l-0.104-1.188l-0.159-1.133l-0.283-0.962l-0.212-0.51l-0.282-0.425l-0.619-0.482l-0.53-0.197l-1.682-0.283
                        l-0.301-0.113l-0.565-0.453l-0.159-0.226l-0.159-0.764l-0.141-1.501l0.297-2.62l-1.907-0.748l0.228-1.131l3.561,0.198l0.198-0.791
                        l-1.188-0.396l0.104-2.041l-0.994-1.518l-1.087-1.188l0.396-0.692l-4.45-0.691c0,0-0.593-0.1-0.987-0.396
                        c-0.396-0.297-0.396-1.089,0-1.682c0.396-0.593-0.692-0.791-0.692-0.791l0.197-1.286l-2.472,0.099l0.493-1.286l-1.482-0.295
                        l-0.594,1.779l-1.188-0.099l-0.297-1.681c0,0-0.89,0.791-1.088,1.285c-0.197,0.494-0.493,1.483-0.493,1.483s-1.089-0.198-1.88-0.198
                        s-0.791,0.396-0.791,0.989c0,0.593-0.494,0.495-1.188,0.593c-0.692,0.098-1.187-0.197-1.284-0.593
                        c-0.1-0.396,0.492-0.593,0.987-0.593s0.297-0.593,0.1-1.583c-0.197-0.989-0.595-0.495-1.187-0.495c-0.594,0-1.583,0.792-1.583,0.792
                        h-1.482l-0.197-2.373l3.56-1.682l-1.385-0.099l-0.099-1.384l-1.779-1.78l-0.891,0.297l-1.879-2.571l2.77-2.67l-0.1-2.077
                        l1.284-0.593l-0.099-2.175l-0.593-0.593l0.197-0.989l-2.474-0.296l-0.593,0.791l-2.472-2.076l-0.1-1.78c0,0-1.583,0.198-2.177,0.297
                        c-0.593,0.099-1.285,0.198-1.879-0.198c-0.593-0.396-0.791-1.088-0.791-1.879s-1.384-2.077-1.384-2.077l1.285-4.153l-0.691-0.692
                        l-2.571-1.088l0.396-0.89l-2.511-0.323l-1.682-0.51l-0.754-2.135l-1.978-0.989c0,0-0.495,0.396-1.385,0.099
                        c-0.891-0.296-0.988-1.483-0.988-1.483l-1.286-0.099l-1.285,2.077l0.692,0.396l-0.989,1.187l-1.087,0.396l-0.792-0.593
                        c0,0-0.396-0.396-1.483-0.297c-1.088,0.099-1.286,1.681-1.286,1.681l-2.57,0.296l-2.374-1.385c0,0-0.594,0.792-1.188,1.583
                        c-0.593,0.792-1.978,0.989-1.978,0.989l-1.583-1.384l0.197-0.989h-1.087l0.396-1.385c0,0-1.682,0-2.571-0.099
                        s-4.647-1.978-4.647-1.978l0.298-1.879l-2.67-0.791l-0.495-0.89l-1.385,1.286h-1.879l-0.099-0.792l-2.176,0.594l-2.274-1.286v-1.088
                        c0,0-0.396-0.198-1.088-0.593c-0.692-0.396,0.494-1.583,0.494-1.583l-1.957-0.614"/>
</svg>

和这里使用的jQuery:

$(document).ready(function() {
    $('#Ebene_1 .path').mouseenter(function() {
        console.log('test');
    });
});

我也尝试了$('#Ebene_1').on('hover','.path', function() {});$('svg path').mouseenter(function() {});。这在任何地方都有效,除了IE.

有没有人有过这样的经历,可以告诉我如何解决这个问题?谢谢你!

当我使用jQuery (edge)而不是v1.6.4时,问题消失了,所以它可能是旧的jQuery的问题。

下面是我发现的一个bug:

http://bugs.jquery.com/ticket/12067

JSFiddle:

http://jsfiddle.net/Ckr2t/3/

以上内容在ie9上进行了测试