javascript - 如何在委托(delegate)上找到可点击元素的索引？

如何找到可点击元素的索引？单击按钮时，我需要获取li的索引，以便可以将其从数组中删除。

    var template = document.querySelector('#template');
    this.element.addEventListener('click', function(e) {
        if(e.target && e.target.nodeName == 'BUTTON' && e.target.className == 'remove') {
            //var index = ??
            //this.deleteTask(index);
        }
    }.bind(this));


    <script id="template" type="x-tmpl-mustache">
        <ul>
            {{ #tasks }}
                <li>{{ . }} - <button class="remove">X</button></li>
            {{ /tasks }}
        </ul>
    </script>

最佳答案

如果使用@index，则可以使用data属性将其附加到按钮本身，然后使用：

var template = document.querySelector('#template');
this.element.addEventListener('click', function(e) {
    if(e.target && e.target.nodeName == 'BUTTON' && e.target.className == 'remove') {
        var index = e.target.dataset.index;
        // or possibly e.target.getAttribute('data-index');
        this.deleteTask(parseInt(index, 10));
    }
}.bind(this));


<script id="template" type="x-tmpl-mustache">
    <ul>
        {{ #tasks }}
            <li>{{ . }} - <button class="remove" data-index="{{ @index }}">X</button></li>
        {{ /tasks }}
    </ul>
</script>

关于javascript - 如何在委托(delegate)上找到可点击元素的索引？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47275650/