Question

给定一个表行（TR）。每当用户点击表格行时，我都要选中该复选框，类似于Google云端硬盘/ Google文档中所示。

例外情况是使用复选框或任何<a>代码，因为它们有不同的操作...如果用户点击复选框或<a>代码，我不希望该复选框自动选中/取消选中。如何设置跟踪点击的绑定，让代码知道是选择复选框还是忽略，因为它是复选框或<a>标记点击？

示例代码：

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

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

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

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

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

5 个答案: