Как я могу обнаружить onclick () или подобное для отдельных символов в тексте?

Question

Я новичок в Javascript и хотел бы изменить текстовую строку, нажимая на отдельные символы. Строка: 0000 0000 0000 0000 представляет двоичное число. Я хотел бы иметь возможность переключать 0 на 1, нажимая непосредственно на текст.

Я пытался использовать onclick (), но мне удалось обнаружить только щелчок по всему абзацу. Каков был бы подходящий метод, чтобы определить, какой персонаж нажимается?

Answer 1

Для такого небольшого количества символов самый простой способ - поместить каждый из них в отдельный диапазон:

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

Я бы также поместил все эти символы в контейнер и подключил click событие на контейнере, а не на отдельных участках, поэтому:

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

Затем подключите его:

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

В обработчике кликов используйте event.target, чтобы узнатькакой промежуток времени был нажат:

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

Дополнительные сведения:

• Спецификация DOM2
• Спецификация DOM3
• DOM2 HTML
• API веб-приложений HTML5

---

Как вы могли видеть выше, мне пришлосьобойти тот факт, что некоторые браузеры используют стандарт addEventListener, а другие (IE8 и более ранние версии) используют attachEvent.Я рекомендую использовать хорошую библиотеку JavaScript, такую ​​как jQuery , Прототип , YUI , Closure или любой из нескольких других .Они сглаживают такие несоответствия браузеров и добавляют множество очень полезных служебных функций, чтобы вы могли сосредоточиться только на том, что вы пытаетесь сделать.

Например, этот код обработчика, написанный с использованием 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

Вам необходимо добавить контейнер вокруг каждого символа, предпочтительно встроенный div или span.Этот вопрос имеет отличный пример добавления оболочки к каждому символу:

Регулярное выражение JavaScript: вставка тега span для каждого символа

Answer 3

вам нужно сделать каждый символ адресуемым для dom (например, обернуть его в span).

скажем, у вас есть этот HTML

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

нужно

1. получить значение узла var $node = $('.binary'), text = $node.text();
2. обрезать и взорвать двоичное число text = $.trim(text); var characters = text.split('');
3. перенос каждого символа в промежутке text = '<span>' + characters.join('</span><span>') + '</span>';
4. вставлять завернутые символы $node.html(text);
5. зарегистрировать делегированный обработчик события $node.on('click', 'span', function(e){ /* handle */ });

ваша ручка может выглядеть как

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

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

собрать вещи вместе:

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

Answer 4

Может быть, вы можете использовать координаты мыши при обнаружении щелчка: window.event.clientX и window.event.clientY выдают координаты X и Y положения мыши.

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

и затем вы проверяете координаты, чтобы исправить нажатый текст

Answer 5

Вы не можете назначить событие одному символу в тексте.

Вам нужно будет назначить обработчик клика для узла, содержащего текст, а затем проверить положение каретки, чтобы определить, какой из персонажей был нажат

Одним из других возможных решений может быть разбиение текста 0000 0000 0000 0000, так что каждый символ, например, будет заключен в элемент span. Затем вы можете привязать обработчик щелчка к этим интервалам и легко определить, какой символ был нажат, потому что событие щелчка будет запущено для одного конкретного символа.

Answer 6

Поместите каждый 0 в диапазон и зарегистрируйте обработчик событий на весь абзац, чтобы использовать делегирование.Используйте свойство Event.target, чтобы изменить текст диапазона, который вы щелкнули в обработчике событий.