如何检测文本中单个字符的onclick()或类似内容? [英] How can I detect onclick() or similar for individual characters in a text?
问题描述
我是Javascript的新手,想通过点击单个字符来修改文本字符串。字符串是: 0000 0000 0000 0000
表示二进制数。我希望能够通过直接单击文本将 0
切换到 1
。
I'm new to Javascript and would like to modify a text string by clicking on individual characters. The string is: 0000 0000 0000 0000
representing a binary number. I would like to be able to toggle a 0
to a 1
by clicking directly on the text.
我试图使用onclick(),但只设法检测到整个段落的点击。检测哪个字符被点击的适当方法是什么?
I have tried to use onclick() but have only managed to detect a click for the entire paragraph. What would be an appropriate method to detect which character is clicked?
推荐答案
对于这么少的字符,最简单的方法是将每个字符放在自己的范围内:
For such a small number of characters, the easiest way is to put each of them in its own 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>
我还将所有这些放在一个容器中,并挂钩单击容器上的
事件而不是单个跨度,所以:
I'd also put all of those in a container, and hook the click
event on the container rather than on the individual spans, so:
<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
找出点击的跨度:
In your click handler, use event.target
to find out which span was clicked:
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 Specification
- DOM3 Specification
- DOM2 HTML
- HTML5 Web Application APIs
如上所示,我不得不解决某些浏览器使用标准 addEventListener
,而其他浏览器(IE8及更早版本)使用 attachEvent
。我建议使用一个很好的JavaScript库,如 jQuery ,原型, YUI ,关闭,或其他几个人。它们为您解决了这些浏览器的不一致问题,并添加了许多非常有用的实用程序功能,因此您可以专注于您想要做的事情。
As you can see above, I had to work around the fact that some browsers use the standard addEventListener
, and others (IE8 and earlier) use attachEvent
. I recommend using a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over those kinds of browser inconsistencies for you, and add a lot of very useful utility functionality so you can focus just on what you're trying to do.
For例如,使用jQuery编写的处理程序代码:
For example, that handler code written using 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.
});
这篇关于如何检测文本中单个字符的onclick()或类似内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!