javascript - 是否可以为有序列表项的数量设置点击事件？

Question

在 HTML 文档中，是否可以仅针对列表项 (li) 或有序列表 (ol) 中的项目编号设置点击事件)?

我希望能够点击数字然后进行一些处理。到目前为止，我有两个想法，但希望有其他方法可以使用正常的有序列表来实现:

1. 使用 CSS 计数器将数字注入(inject)到我将放置在数字所在位置的元素中。
2. 将透明元素绝对定位在关联列表项内的数字上。

下面是列表的示例。我希望能够单击显示为 1.、2. 或 3. 的部分。

HTML 来源:

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

在浏览器中的结果:

1. First Item
2. Second Item
3. Third Item

Answer 1

应用@Fallexe 建议，但在 JS 中添加跨度:

[].slice.call (document.querySelectorAll ('ol, ul')).forEach (function (list) {
    for (var s, el = list.firstElementChild; el; el = el.nextElementSibling)
      el.innerHTML = '<span>' + el.innerHTML + '</span>';

    list.addEventListener ('click', function (ev) {
        if (ev.target.tagName !== 'SPAN')
          for (var el = this.firstElementChild; el; el = el.nextElementSibling)
              el.className = el === ev.target ? 'selected' : '';
    }, false);    
});

参见 http://jsfiddle.net/jstoolsmith/6nxeT/ 处的 fiddle