如何检测文本中单个字符的onclick(）或类似字符

How can I detect onclick() or similar for individual characters in a text?

本文关键字：字符 onclick 何检测 检测 文本 单个      更新时间：2023-09-26

我是Javascript的新手，想通过单击单个字符来修改文本字符串。字符串为：0000 0000 0000 0000，表示二进制数。我希望能够通过直接点击文本将0切换为1。

我试过使用onclick（），但只检测到整个段落的点击。检测点击哪个字符的合适方法是什么？

对于如此少量的字符，最简单的方法是将每个字符放在自己的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><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
  • HTML5 Web应用程序API

正如您在上面看到的，我不得不解决以下事实：一些浏览器使用标准的addEventListener，而另一些浏览器（IE8及更早版本）使用attachEvent。我建议使用一个好的JavaScript库，如jQuery、Prototype、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.
});

您需要为每个字符添加一个容器，最好是内联div或span。这个问题有一个关于为每个字符添加包装器的好例子：

JavaScript正则表达式：为每个字符插入span标记

您需要使每个字符都可寻址到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. 注入被封装的字符CCD_ 13
  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';
});

将每个0放入一个span中，并在整个段落上注册一个事件处理程序，以便使用委托。使用Event.target属性可以更改您在事件处理程序中单击的跨度的文本。

不能将事件分配给文本中的单个字符。

您必须将单击处理程序分配给包含文本的节点，然后检查插入符号的位置来确定哪个字符已被单击。

其他可能的解决方案之一可以是分割文本0000 0000 0000 0000，例如，使每个字符都封装在span元素中。然后，您可以将单击处理程序绑定到这些跨度，并轻松确定单击了哪个字符，因为将为一个特定的字符触发单击事件。

也许你可以在检测点击时使用鼠标坐标：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;
}

然后检查坐标以修复单击的文本

相关文章：