Question

可能重复：
jQuery - on() function when a div is clicked, but not when a child of that div is clicked

$(oTrPlanning).prev().children('td').each(function () {
    this.onclick = setCountClick;
});

点击了TD setCountClick()，但TD也包含Textbox：

<td> 
    <input class="Input-InlineFilter" id="TextFirst"  type="text" value="">
</td>

因此，当我开始在Textbox上输入内容时，再次调用setCountClick()。我想在点击广告时调用setCountClick()，而不是Textbox。

Answer 1

点击事件会将DOM从textbox冒充到td，一直到body。如果您不希望textbox次点击触发td点击处理程序，则需要停止冒泡：

$('#TextFirst').click(function (e) {
    e.stopPropogation();
});

Documentation for stopPropagation

要进行扩展，您应该利用此冒泡来仅绑定所有td的一个事件处理程序：

// bind one handler to all tds
$(oTrPlanning).prev().on('click', 'td', function (e) {
    // ensure the clicked element is a TD
    if (this.nodeName === 'TD') {
        setCountClick(e);
    }
});

Documentation for nodeName

请注意，如果您在this内的任何位置依赖setCountClick运算符，它可能无法按预期工作。要解决此问题，您需要在致电$.proxy时使用bind或setCountClick进行调查：

setCountClick.bind(this)(e);

bind返回一个新函数，该函数使用您在新函数中作为this参数传递的参数。然后执行该函数并将其传递给常规参数。

Documentation for bind

Answer 2

问题是事件是从孩子传播到父母的。你可以像这样绑定：

$(oTrPlanning).prev().on('click', 'td', setCountClick);

您的方法setCountClick将收到event作为其第一个参数，您可以这样查看：

function setCountClick(event) {  
   // make sure the click was on a TD and not something else
   if ($(event.target).is('td')) {
        // you've hit a TD, run your code here
   }

}

单击td，单击文本框

2 个答案: