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

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

复选框或任何

示例代码：

<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>

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

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

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


项目15
你的名字
11月10日下午4:08
设置

改名
删除


​
 我会对那些您不想处理行的元素使用
e.stopPropagation
。见下文

选项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>

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

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

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

HTML:

<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>

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

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

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

或者干脆自己处理

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

HTML:

<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>

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

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

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



演示：
Jquery方法：

您只需检查
e.target
的节点类型即可获得所需的行为。
如果您希望在用户单击
a
或
复选框时启动另一个函数，而不触发“默认”函数，只需在这些其他函数上返回
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;
});

​
 给你：

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

你想做什么？要查看单击了哪个元素，请使用。谢谢，但这就是问题所在。当您单击复选框或a标记时，控制台正在记录日志，这是我不想要的。因此，我的评论的第一部分是：您想做什么？我不理解你问的问题。我想在用户单击行时检查行的复选框，除非用户单击复选框或标记。