在 <table> 中需要 <td> 功能才能工作，而不是 <td> 重定向 URL答案

【问题标题】：In a <table> needs to <td> functionality to work and not <td> redirect URL在 <table> 中需要 <td> 功能才能工作，而不是 <td> 重定向 URL
【发布时间】：2021-11-20 09:37:56
【问题描述】：

我在<table> 中遇到问题

我有一个表格行，它有一个重定向 URL，只有一个表格数据 <td> 具有不同的功能

<table>
    <thead>
        <th></th>
        <th>Name</th>
        <th>ID</th>
        <th>Active</th>
    </thead>
    <tbody>
        <tr type="button" onclick="window.location.href = '/xxx/bbb/001';">
            <td id="dtr-control"></td>
            <td>XXXXXXXXXX</td>
            <td>001</td>
            <td>True</td>
        </tr>
    </tbody>
</table>

在上面的 html 中，<tr> 将充当链接，第一个 <td> 具有自己的功能，例如单击第一个它将列出表格的其他选项/控件，它工作正常但也正在重定向到<tr> 中定义的页面。

如果我首先点击<tr>，它应该列出选项，如果我点击该行的其余部分，它应该将我重定向到其他页面。

如何只停止父功能？

提前致谢。

【问题讨论】：

我了解这是您的要求，但为了遵循良好的做法，您应该提出更好的 html/design。
你可能需要一些 JS 来做到这一点，比如使用 Event.preventDefault()，但我同意 @Sang 这里。
这能回答你的问题吗？ How to stop event propagation with inline onclick attribute?
<td onclick='event.stopPropagation()'> 适用于 Chrome，但可能不适用于其他浏览器 jsfiddle.net/1s4gfjhd 但是，如上所述，来自点击处理程序的 return false 将具有相同的效果

标签： javascript html jquery asp.net material-design

【解决方案1】：

不使用 'stopPropagation' 事件的解决方案：

<head>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"> </script>
</head>
<body>
    <table border=1>
        <thead>
            <th></th>
            <th>Name</th>
            <th>ID</th>
            <th>Active</th>
        </thead>
        <tbody>
            <tr>
                <td class='disableClick'>click me</td>
                <td>XXXXXXXXXX</td>
                <td>001</td>
                <td>True</td>
            </tr>
        </tbody>
    </table>
</body>


<script>
    $(document).ready(function() {
        $("td:not(.disableClick)").click(function() {
                 alert("Click 1");
             //window.location.href = '/xxx/bbb/001';
        });
        $("td.disableClick").click(function() {
                 alert("Click 2");
             //window.location.href = '/xxx/bbb/001';
        });
    });
</script>

【讨论】：