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

Question

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

复选框或任何标签例外，<a>因为它们具有不同的操作...如果用户单击复选框或<a>标签，我不希望复选框自动选中/取消选中。如何设置跟踪点击的绑定并让代码知道是选择复选框还是忽略，因为它是复选框或<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>

​</p>

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/

Answer 2

$("table").delegate("td", "click", function(e) {
  console.log(e);
  // e.delegateTarget === your table element
  // e.currentTarget === the td clicked
  // e.target === the actual element that you clicked
});​

您应该能够检查节点类型e.target以获得所需的行为。

Answer 3

jQuery on()方法：

$("table").on("click", "input", function(event){
   var clicked_checkbox = $(this);
});

Answer 4

干得好：

$("tr").click(function(event){
    if(!$(event.srcElement).is("a"))
    {
        var checkbox = $(this).find('input[type="checkbox"]');
        $(checkbox).prop("checked",!$(checkbox).prop("checked"));
    }
});​

http://jsfiddle.net/mwk6W/1/

Answer 5

如果您希望在用户单击aor时触发另一个函数checkbox，而不触发“默认”函数，只需返回false这些其他函数，例如：

$("table").delegate("td", "click", function(e) {
    // Default stuff...
    console.log(e);
});

$( 'a' ).click( function() {
    // Do something else...
    return false;
});

$( 'input[type="checkbox"]' ).click( function() {
    // Do something else...
    return false;
});

​</p>