javascript - 如何跟踪实际单击委托(delegate)的元素？

Question

给定一个表格行 (TR)。每当用户点击表格行时，我都想选中复选框，类似于在 Google Drive/Google Docs 上看到的那样。

异常(exception)情况是复选框或任何 <a>标记，因为它们有不同的操作...如果用户单击复选框或 <a>标记我不希望复选框自动选中/取消选中。我如何设置一个绑定(bind)来跟踪点击并让代码知道是选择复选框还是忽略它，因为它是一个复选框或 <a>标记点击？

示例 jsfiddle:http://jsfiddle.net/xHKUZ/1/

示例代码:

<table>
<tr>
        <td class="selector">
            <input type="checkbox" name="folders" value="67">
        </td>
        <td class="name">
            <a>Item 15</a>
        </td>
        <td class="creator">
            <span class="creator">Your Name</span>
        </td>
        <td class="last_modified">
            <time class="" datetime="2012-11-11T00:08:09Z">Nov-10 4:08 PM</time>
        </td>
        <td class="actions">
            <div class="actions-group">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-gear">Settings</i>
                    <i class="icon-caret"></i>
                </a>
                <ul class="dropdown-menu dropright">
                    <li><a data-rename="true">Rename</a></li>
                    <li><a data-archive="true">Delete</a></li>
                </ul>
            </div>
        </td>
</tr>
</table>

Answer 1

我会在那些您不想处理行点击的元素上使用 e.stopPropagation。见下文，

选项 1:

$("table").on('click', '.noclick', function (e) {
    e.stopPropagation();
}).on("click", "td", function(e) {
    console.log(e);
});

HTML:

<input type="checkbox" class="noclick" name="folders" value="67">

演示: http://jsfiddle.net/xHKUZ/7/

选项 2:

如果你想阻止整个TD，那么你可以简单地

$("table").on('click', 'td:not(.noclick)', function (e) {
    console.log(e);
});

或者自己处理。

$("table").on('click', 'td', function (e) {
    if ($(this).hasClass('noclick')) { return; }
    console.log(e);
});

HTML:

 <td class="selector noclick">
     <input type="checkbox" name="folders" value="67">
 </td>

演示: http://jsfiddle.net/xHKUZ/16/