JavaScript和SVG：如何增加onClick事件的可點擊區域？

我的腳本在筆畫寬度爲3時在屏幕上繪製線條。線條的大小是理想的（直觀），但它們不是很容易點擊。JavaScript和SVG：如何增加onClick事件的可點擊區域？

作一個粗略的例子：

<html> 
<head> 
<script> 
function selectStrand(evt) { 
    current_id = evt.target.getAttributeNS(null, "id"); 

    document.getElementById('main').innerHTML = current_id; 
} 
</script> 
</head> 

<body> 
Selected line: <span id="main"></span> 

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1000 1000"> 
    <g id="buffer" transform="translate(10,0)"> 
     <line id="blue-blue" x1="50" y1="50" x2="500" y2="50" style="stroke:blue; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-orange" x1="50" y1="70" x2="500" y2="70" style="stroke:orange; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-green" x1="50" y1="90" x2="500" y2="90" style="stroke:green; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-brown" x1="50" y1="110" x2="500" y2="110" style="stroke:brown; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-grey" x1="50" y1="130" x2="500" y2="130" style="stroke:grey; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-khaki" x1="50" y1="150" x2="500" y2="150" style="stroke:khaki; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-red" x1="50" y1="170" x2="500" y2="170" style="stroke:red; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-black" x1="50" y1="190" x2="500" y2="190" style="stroke:black; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-yellow" x1="50" y1="210" x2="500" y2="210" style="stroke:yellow; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-purple" x1="50" y1="230" x2="500" y2="230" style="stroke:purple; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-pink" x1="50" y1="250" x2="500" y2="250" style="stroke:pink; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-cyan" x1="50" y1="270" x2="500" y2="270" style="stroke:cyan; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
    </g> 
    </g> 
</svg> 

</body> 
</html>

有沒有一種簡單的方法，以增加周圍每一行的區域，使它們更容易點擊？

來源

2012-02-02 renosis

對於每一行，嘗試在它的頂部繪製一個具有較大筆畫寬度的透明線，並在其上設置onclick。

來源

2012-02-02 18:05:27

好，很好，謝謝。這有效，似乎是最好的方法。 – renosis 2012-02-02 18:19:04

您可能希望在您的示例中將click事件偵聽器添加到根或id = buffer的組中，並查看您得到的事件的目標以確定哪個線路被點擊。這樣你只需要一個事件監聽器，而不是每個元素上的一個。呵呵，''部分是不必要的，當在html中包含svg內聯時，它將被忽略。 – 2012-02-03 09:09:00

很酷，謝謝Erik！ – renosis 2012-02-06 13:10:26

上述答案的變體。對於一個很酷的選擇效果組，每條細線和透明線組合在一起，細線在上面。將onclick設置爲該組，然後在onclick中爲粗線的透明度設置動畫效果。

來源

2012-02-03 09:37:17 David

雅，當我想出整體機制時，我正在考慮用onClick做點華麗的事情......聽起來像個好主意。謝謝你的提示！ – renosis 2012-02-06 13:11:59

JavaScript和SVG：如何增加onClick事件的可點擊區域？

回答

相關問題