在IE8中使用Raphael的文本链接

我在使用Raphael的IE8中获得简单的文本链接时遇到了很多麻烦。我想要的行为像一个正常的链接文本。我已经包含了一些我一直在玩的代码。在IE8中使用Raphael的文本链接

得到光标通过悬停功能更改为手document.body.cursor
单击功能只对实际的文字像素，当点击作品 - 点击在字母之间的差距不执行任何操作
上述问题也影响悬停

我是否需要在文本后面添加一些元素，矩形/边界框来处理鼠标？有任何想法吗？这个问题只在IE8中，正如你所知，它使用VML通过Raphael。

下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> 
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.4.min.js"></script> 
    <script type="text/javascript" src="js/raphael-min.js" charset="utf-8"></script> 
    <script type="text/javascript"> 
    window.onload = function() { 

    // Creates canvas 320 × 200 at 10, 50 
    var paper = Raphael(10, 50, 420, 400); 

    var lbl = paper.text(50, 40, 'test').attr({ 
     "font" : '14px Helvetica, Arial', 
     stroke : "none", 
     fill : '#ffffff', 
     'text-anchor' : 'middle' 
    }); 

    lbl.node.style.display = 'block'; 
    lbl.node.style.cursor = 'pointer'; 

    lbl.click(function() { 
     alert('hi');  }); 

    lbl.hover(function() { 
     document.body.style.cursor = 'hand'; 
    }, function() { 
     document.body.style.cursor = 'default'; 
    }); 

    } 
    </script> 
</head> 
<body style="background-color: #000000;"> 
    <div id="wrapper" style="background-color: #000000;"> </div> 
</body> 
</html>

来源

2010-08-19 ncatnow

var lbl = paper.text(50, 40, 'test').attr({ 
    font : '14px Helvetica, Arial', 
    stroke : "none", 
    fill : '#fff' 
}), 
blanket = paper.rect().attr(lbl.getBBox()).attr({ 
    fill: "#000", 
    opacity: 0, 
    cursor: "pointer" 
}).click(function() { alert("hi"); });

来源

2010-08-23 09:39:24

感谢德米特里极大的帮助了我。 – ncatnow 2010-08-24 04:46:50

大约2年后仍然适用。 – 2013-02-22 16:57:00

您可以将类添加到您的元素像这样（不IE8工作）：

lbl.node.className.baseVal += "linked_label";

有了这样一个样式表：

.linked_label:hover { 
    cursor: pointer; 
    text-decoration:underline; 
}

除了javascript钩子如果你愿意。

来源

2013-11-14 05:48:17 duck9

在IE8中使用Raphael的文本链接

回答

相关问题