Jak wykryć onclick() lub podobne dla poszczególnych znaków w tekście?

Question

Jestem nowicjuszem w Javascript i chciałbym zmodyfikować ciąg tekstowy, klikając poszczególne znaki. Ciąg znaków to: 0000 0000 0000 0000 reprezentujący liczbę binarną. Chciałbym móc przełączyć 0 na 1, klikając bezpośrednio na tekst.

Próbowałem użyć onclick(), ale udało mi się wykryć kliknięcie tylko dla całego akapitu. Jaka byłaby odpowiednia metoda wykrywania, która postać została kliknięta?

Answer 1

Dla takiej małej liczbie znaków, najprostszym sposobem jest umieszczenie każdego z nich w swojej rozpiętości:

<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> 

ja również umieścić wszystkie te, w pojemniku, a hak zdarzenia click na pojemniku, a nie na poszczególnych przęseł, więc:

<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> 

Następnie podłączyć go:

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); 
    }); 
} 

W swojej click obsługi, użyj event.target aby dowiedzieć się, które rozpiętość został kliknięty:

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" 
} 

Więcej zbadać:

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

---

Jak widać powyżej, musiałem obejść fakt, że niektóre przeglądarki używać standardowego addEventListener i inni (IE8 i wcześniej) używać attachEvent.Zalecam używanie dobrej biblioteki JavaScript, takiej jak jQuery, Prototype, YUI, Closure lub any of several others. Zwalniają te niespójności w przeglądarkach i dodają wiele przydatnych funkcji narzędziowych, dzięki czemu możesz skupić się tylko na tym, co próbujesz zrobić.

Na przykład, że kod obsługi napisane przy użyciu 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

Musisz dodać pojemnik zaokrąglający każdą postać, najlepiej inline div lub span. To pytanie ma doskonały przykład na dodanie do każdego opakowania Charakter:

JavaScript regular expression: inserting span tag for each character

Answer 3

umieścić każdy 0 do rozpiętości i zarejestrować eventhandler na cały akapit, w celu wykorzystania delegację. Użyj właściwości Event.target, aby zmienić tekst zakresu, w którym kliknąłeś w module obsługi zdarzeń.

Answer 4

Nie można przypisać zdarzenia do pojedynczego znaku w tekście.

Należy przypisać obsługę kliknięcia do węzła zawierającego tekst, a następnie sprawdzić pozycję karetki, aby określić, która z postaci została kliknięta.

Jednym z innych możliwych rozwiązań może być podział tekstu 0000 0000 0000 0000, tak aby każdy znak był na przykład owinięty w element span. Następnie możesz powiązać obsługę kliknięć z tymi rozpiętościami i łatwo określić, który znak został kliknięty, ponieważ zdarzenie kliknięcia zostanie uruchomione dla jednej, konkretnej postaci.

Answer 5

Może ty może być współrzędne użytkowe myszy, gdy wykryje kliknij: window.event.clientX i window.event.clientY daje X i Współrzędne Y położenia myszy.

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

a następnie sprawdzić współrzędne naprawić klikniętego tekst

Answer 6

będzie trzeba, aby każdy adresowalnych znaków na Dom (owijając go w przedziale, na przykład).

powiedzieć, że masz ten kod HTML

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

trzeba

1. uzyskać nodeValue var $node = $('.binary'), text = $node.text();
2. wykończenia i eksplodować liczbę binarną text = $.trim(text); var characters = text.split('');
3. owinąć każdy znak w rozpiętości text = '<span>' + characters.join('</span><span>') + '</span>';
4. wstrzyknąć wr oznaczone postacie: $node.html(text);
5. zarejestrować delegowanego obsługi zdarzeń $node.on('click', 'span', function(e){ /* handle */ });

Twój uchwyt może wyglądać

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

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

oddanie rzeczy razem:

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'; 
});