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

Question

在HTML中，是否可以为有序列表(li)中的列表项( list-item，li)或项目符号( ordered，ol)的数量设置单击事件？

我希望能点击这个号码，然后再做一些处理。到目前为止，我有两个想法，但我希望有其他方法来处理正常的有序列表：

1. 使用CSS计数器将数字注入到我将放置数字的元素中。
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/小提琴

Answer 2

使用这个类，只需使用z索引，您就可以实现它。

.all {
    margin-left:-30px;
    padding-left: 30px;
}

对于RTL方向：

.all {
    margin-right:-30px;
    padding-right: 30px;
}

即：http://jsfiddle.net/ESQKV/