在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的文本鏈接

回答

相關問題