javascript - 禁用各种 html 元素上的单击事件

Question

我有以下场景，其中我的 tr 中有多个 td，如下面的代码所示:

<tr class="tbluplift">
  <td align="left">
     <a href="#">
       <asp:Label ID="lblStd" runat="server" Class="Quote"></asp:Label>
     </a>
  </td>
</tr>

在此，我想禁用对 td、a 和 label 的点击，因此为了实现此目的，我使用了以下代码jquery的:

$('.tbluplift a').each(function () {
    $(this).css("cursor", "default");
    $(this).on('click', function (e) {
        console.log('hi');
        e.preventDefault();
    });
});

$('.tbluplift td').each(function () {
    $(this).css("cursor", "default");
    $(this).on('click', function (e) {
        e.preventDefault();
    });
});

$('.tbluplift span').each(function () {
    $(this).css("cursor", "default");
    $(this).on('click', function (e) {
        e.preventDefault();
    });
});

但是，这段代码似乎对我不起作用。正如您可能会检查的那样，我使用了 console.log('hi')，但我的日志中没有任何内容。我猜代码在 'click' 部分被破坏了。它甚至没有进入其中。

有谁知道我如何实现该功能。

提前致谢。

Answer 1

试试这个:

// change cursor css for all elements inside tbluplift
$('.tbluplift').find('a, td,span').css("cursor", "default");

//bind click event for a, td and span inside tbluplift and return false   
$('.tbluplift').on("click","a,td,span",function(e) {
  e.preventDefault();
  return false;
});

<强> Working Demo