6
Kịch bản lệnh của tôi vẽ các đường trên màn hình với chiều rộng đột quỵ là 3. Kích thước của các đường là lý tưởng (trực quan) nhưng chúng không dễ bấm.JavaScript và SVG: làm cách nào để bạn tăng diện tích có thể nhấp cho sự kiện onClick?
Như một ví dụ thô:
<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>
Có một cách đơn giản để tăng diện tích xung quanh mỗi dòng để làm cho họ dễ dàng hơn để nhấp?
Ok tuyệt vời, cảm ơn. Điều đó hoạt động và có vẻ như đó là cách tốt nhất. – renosis
Bạn có thể muốn thêm trình xử lý sự kiện nhấp chuột vào thư mục gốc hoặc nhóm có id = buffer trong ví dụ của bạn và xem mục tiêu của sự kiện mà bạn nhận được để tìm ra dòng nào được nhấp. Bằng cách đó, bạn chỉ cần một trình xử lý sự kiện, thay vì một đối tượng trên mỗi phần tử. Ồ, và phần ' 'không cần thiết khi bao gồm nội dung svg trong html, nó sẽ bị bỏ qua. –
Ah tuyệt vời, cảm ơn Erik! – renosis