整个表格行可点击，除非点击带有 .class 的 td 中的元素答案

【问题标题】：Entire table row clickable except when clicking element within a td with a .class整个表格行可点击，除非点击带有 .class 的 td 中的元素
【发布时间】：2016-08-09 11:59:51
【问题描述】：

我已将表格中的整行设为可点击。当您单击某些数据的链接时，在某些列中会显示/隐藏功能，例如

<td>
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
...etc. etc...
    <li class="show-hide"><a href="#" class="show-hide">Show more</a></li>
    </ul>
</td>

这基本上只是将 ul 从显示 3 li 扩展到 10...

但是因为整个表格行都是可点击的，所以当我点击“显示更多”时，它会转到该行的链接......而忽略了显示/隐藏的功能。

所以我想要实现的是，当用户单击带有 class="show-hide" > 的链接时，忽略将用户发送到整行链接的 jQuery...

jQuery 使行可点击

$(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

【问题讨论】：

你试过 event.stopPropagation();
我需要一些关于如何将其放在上下文中的建议

标签： jquery html-table

【解决方案1】：

捕捉事件并读取其属性。通过这种方式，您可以识别您现在点击的是什么。

$(document).ready(function($) {
    $(".clickable-row").click(function(event) {
        if(!$(event.target).hasClass('show-hide')) {
           window.document.location = $(this).data("href");
        }
    });
});

看看它的工作原理：

https://jsfiddle.net/19ywsnh9/

【讨论】：

【解决方案2】：

使用event.stopPropagation()，它会限制父事件的调用。请参考链接：When use event.stopPropogation

    $(".show-hide").click(function (event) {            
        event.stopPropagation();
        // your logic here
    });

【讨论】：

【解决方案3】：

将事件绑定到li，类.show-hide除外：

$('.clickable-row li:not(.show-hide)').click(function () {
    window.document.location = $(this).closest('.clickable-row').data("href");
});

【讨论】：

整行都是可点击的，不仅仅是<li>s
@MarcosPérezGude 只是在哪里绑定事件很重要。
您正在使用此代码更改逻辑的行为。不一样绑定所有<tr>标签避免某些条件，而不是删除该绑定并仅添加<li>标签，因为所有剩余空间都将不可点击。我认为这不是一个好的解决方案。
但这只是我的意见，OP必须自己发音。