Question

在我的程序中，我向表中添加了一个onclick监听器。我想要的是当侦听器触发[当我点击表格单元格]时，我想要禁用该特定单元格的侦听器。除了向每个td元素添加侦听器并在触发时删除特定td的侦听器，是否有可能实现此目的。我的HTML看起来像这样：

                    <table id="board">
                        <tr>
                            <td id="c1"> 1</td>
                            <td id="c2"> 2</td>
                            <td id="c3"> 3</td>
                        </tr>   
                        <tr>
                            <td id="c4"> 4</td>
                            <td id="c5"> 5</td>
                            <td id="c6"> 6</td>
                        </tr>   
                        <tr>
                            <td id="c7"> 7</td>
                            <td id="c8"> 8</td>
                            <td id="c9"> 9</td>
                        </tr>   
                    </table>

我添加的听众是这样的：

var table = getId("board", 1);
table.addEventListener('click', sample , false);
function sample( evt ) {
   alert(evt.target.innerHTML);
}

Answer 1

您可以在已点击的元素上存储一些标记。例如，在数据属性中：

function sample(evt) {
    var target = evt.target;

    if (!target.getAttribute('data-clicked')) {
        target.setAttribute('data-clicked', true);
        alert(evt.target.innerHTML);
    }
}

演示：http://jsfiddle.net/7SMrE/

Answer 2

您可以直接在单击的元素上添加事件处理程序，以阻止事件传播

function sample(evt) {
    alert(evt.target.innerHTML)
    evt.target.addEventListener('click', function(e) {
        e.stopPropagation();
    });
}

FIDDLE

Answer 3

您可以使用“one”函数添加一次侦听器。

Fiddle

HTML code：

<table id="board">
                    <tr>
                        <td id="c1" class="test"> 1</td>
                        <td id="c2" class="test"> 2</td>
                        <td id="c3" class="test"> 3</td>
                    </tr>   
                    <tr>
                        <td id="c4" class="test"> 4</td>
                        <td id="c5" class="test"> 5</td>
                        <td id="c6" class="test"> 6</td>
                    </tr>   
                    <tr>
                        <td id="c7" class="test"> 7</td>
                        <td id="c8" class="test"> 8</td>
                        <td id="c9" class="test"> 9</td>
                    </tr>   
                </table>

JS：

$('.test').one('click', function(){
  alert('hi');
})

像这样，你在每个单元格上都有监听器，直到你点击特定的单元格

如果我使用javascript将侦听器添加到父元素，则删除特定子元素的事件侦听器？

3 个答案:

演示：http://jsfiddle.net/7SMrE/