Làm cách nào để phát hiện onclick() hoặc tương tự cho các ký tự riêng lẻ trong văn bản?

Question

Tôi mới sử dụng Javascript và muốn sửa đổi chuỗi văn bản bằng cách nhấp vào từng ký tự. Chuỗi là: 0000 0000 0000 0000 đại diện cho một số nhị phân. Tôi muốn có thể chuyển đổi một số 0 thành 1 bằng cách nhấp trực tiếp vào văn bản.

Tôi đã cố gắng sử dụng onclick() nhưng chỉ quản lý để phát hiện nhấp chuột cho toàn bộ đoạn văn. Điều gì sẽ là một phương pháp thích hợp để phát hiện nhân vật nào được nhấp?

Answer 1

Đối với một số nhỏ như vậy nhân vật, cách dễ nhất là đặt mỗi trong số họ trong khoảng thời gian riêng của mình:

<span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span> 

Tôi cũng muốn đưa tất cả những người trong một container, và móc sự kiện click trên thùng sơn chứ không phải trên nhịp cá nhân, vì vậy:

<div id="container"> 
    <span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span> 
</div> 

Sau đó, móc nó lên:

var container = document.getElementById("container"); 
if (container.addEventListener) { 
    container.addEventListener('click', clickHandler, false); 
} 
else if (container.attachEvent) { 
    container.attachEvent('onclick', function(e) { 
     return clickHandler.call(container, e || window.event); 
    }); 
} 

Trong handler nhấp chuột của bạn, sử dụng event.target để tìm ra khoảng được nhấp:

function clickHandler(event) { 
    var span = event.target; 
    // Do something with the span, such as look at its `innerHTML` and 
    // see if it's "0" -- if so, make it "1"; if not, make it "0" 
} 

More để khám phá:

• DOM2 Specification
• DOM3 Specification
• DOM2 HTML
• HTML5 Web Application APIs

---

Như bạn thấy ở trên, tôi đã phải làm việc trên thực tế là một số trình duyệt sử dụng các tiêu chuẩn addEventListener, và những người khác (IE8 trở về trước) sử dụng attachEvent.Tôi khuyên bạn nên sử dụng thư viện JavaScript tốt như jQuery, Prototype, YUI, Closure hoặc any of several others. Họ làm mịn các loại trình duyệt không thống nhất đó và thêm nhiều chức năng tiện ích rất hữu ích để bạn có thể tập trung vào những gì bạn đang cố gắng làm.

Ví dụ, mã xử lý bằng văn bản sử dụng jQuery:

$("#container").on("click", "span", function() { 
    // `this` refers to the span that was clicked; you can use 
    // `innerHTML` as above, or wrap it in a jQuery instance 
    // like this: 
    // var $this = $(this); 
    // ...and then use jQuery's `html` function to both 
    // retrieve and set the HTML. 
}); 

Answer 2

Bạn cần phải thêm một vùng chứa tròn mỗi ký tự, tốt nhất là nội tuyến div hoặc span. Câu hỏi này có một ví dụ tuyệt vời về việc bổ sung wrapper cho mỗi nhân vật:

JavaScript regular expression: inserting span tag for each character

Answer 3

Đặt mỗi 0 vào một khoảng và đăng ký một eventhandler trên toàn bộ đoạn văn, để sử dụng đoàn. Sử dụng thuộc tính Event.target để thay đổi văn bản của khoảng bạn đã nhấp vào trong trình xử lý sự kiện.

Answer 4

Bạn không thể chỉ định sự kiện cho ký tự đơn lẻ trong văn bản.

Bạn sẽ phải chỉ định trình xử lý nhấp chuột cho nút giữ văn bản và sau đó kiểm tra vị trí dấu mũ để xác định chính bạn đã nhấp vào ký tự nào.

Một trong các giải pháp có thể khác có thể là tách văn bản 0000 0000 0000 0000, để mỗi ký tự được bao bọc trong ví dụ span. Sau đó, bạn có thể liên kết trình xử lý nhấp chuột với các nhịp đó và dễ dàng xác định ký tự nào đã được nhấp vì sự kiện nhấp chuột sẽ được kích hoạt cho một ký tự cụ thể.

Answer 5

lẽ bạn có thể có thể tọa độ sử dụng chuột khi phát hiện nhấp chuột: window.event.clientX và window.event.clientY mang đến cho bạn X và Tọa độ Y của vị trí chuột.

function SetValues() 
{ 
    var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ; 
    document.getElementById('divCoord').innerText = s; 
} 

và sau đó bạn kiểm tra tọa độ để sửa chữa các văn bản nhấp

Answer 6

bạn sẽ cần để làm cho mỗi địa chỉ nhân vật để các dom (bằng cách gói nó trong một khoảng, ví dụ).

nói rằng bạn đã có HTML này

<p class="binary">0000 0000 0000 0000</p> 

bạn cần phải

1. được nodeValue var $node = $('.binary'), text = $node.text();
2. trim và nổ tung các số nhị phân text = $.trim(text); var characters = text.split('');
3. quấn mỗi nhân vật trong một khoảng thời text = '<span>' + characters.join('</span><span>') + '</span>';
4. tiêm wr nhân vật được ứng dụng $node.html(text);
5. đăng ký một sự kiện handler giao $node.on('click', 'span', function(e){ /* handle */ });

xử lý của bạn có thể trông giống như

function(e) { 
    // abort on empty node 
    if (this.innerHTML == ' ') { 
    return; 
    } 

    this.innerHTML = this.innerHTML == '1' ? '0' : '1'; 
} 

đưa mọi thứ trở lại với nhau:

var $node = $('.binary'), 
    text = $.trim($node.text()), 
    characters = text.split(''); 

text = '<span>' + characters.join('</span><span>') + '</span>'; 
$node.html(text).on('click', 'span', function(e) { 
    // abort on empty node 
    if (this.innerHTML == ' ') { 
     return; 
    } 

    this.innerHTML = this.innerHTML == '1' ? '0' : '1'; 
});