禁用 jQuery 子元素上的点击事件

Question

我有一个 table，我在上面制作了所有 table 行，使其相对于其中嵌套的 link 可以点击。但是我正在尝试禁用特定的 table 行，一旦它们有 class 与之相关联就停止被点击。

<script>
$('.selectable tr').click( function() {
    var productLink = $(this).find("a");

    productLink.attr("target", "_doc");
    window.open(productLink.attr("href"));

    return false;
});

$('.vandut_activ').click( function() {
    $(this).attr('disabled', 'disabled');
    return false;
});
</script>

问题是，当我单击带 .vandut_activ 的 table 行时，它仍会打开一个空的新选项卡，因为其中没有 link 可供访问。在这种情况下如何停止点击事件？感谢您的帮助！

Answer 1

我不知道你的 jQuery 版本，但从 jQuery1.6+ 开始，你应该使用 $("input").prop('disabled', true); 来禁用事件。试试下面的代码（未测试）

选项 1：

<script>
$('.selectable tr').click( function() {
    var productLink = $(this).find("a");

    productLink.attr("target", "_doc");
    window.open(productLink.attr("href"));

    return false;
});

$('.vandut_activ').click( function() {
    $(this).prop('disabled', true);
    return false;
});
</script>

选项 2：

您可以使用css 属性 pointer-events 来禁用点击事件。

<script>
$('.selectable tr').click( function() {
    var productLink = $(this).find("a");

    productLink.attr("target", "_doc");
    window.open(productLink.attr("href"));

    return false;
});

$('.vandut_activ').click( function() {
    $(this).css('pointer-events','none');
    return false;
});
</script>

Answer 2

如果您不希望该点击在 'tr' 上起作用，'vandut_activ' class 那么您可以试试这个，

希望这就是您要找的东西

$('.selectable tr:not(.vandut_activ)').on('click', function() {
var productLink = $(this).find("a");

productLink.attr("target", "_doc");
window.open(productLink.attr("href"));

return false;});

禁用 jQuery 子元素上的点击事件

Disable jQuery click event on child elements

jquery

events

row

click