如何跟踪实际单击委托的元素？答案

【问题标题】：How to track the element where a delegate is actually clicked?如何跟踪实际单击委托的元素？
【发布时间】：2012-11-12 21:25:58
【问题描述】：

给定一个表格行 (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>

【问题讨论】：

你想做什么？要准确查看点击了哪个元素，请使用e.target。
谢谢，但这就是问题所在。当您单击复选框或我不想要的标签时，控制台正在记录。
因此我的评论的 first 部分：你想做什么？我没有听懂你问的问题。

标签： javascript jquery delegates html-table

【解决方案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/

【讨论】：

【解决方案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 的节点类型以获得您想要的行为。

【讨论】：

【解决方案3】：

jquery on() 方法：

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

【讨论】：

我想在用户点击该行时检查该行的复选框，除非用户点击了一个复选框或标签。

【解决方案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/

【讨论】：

【解决方案5】：

如果您希望在用户单击a 或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;
});

【讨论】：