javascript - 通过 onclick 禁用 anchor

Question

我在按下 anchor 时无法禁用它。

HTML:

<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'>
<i class='polygon_mark'></i>
</a>
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'>
<i class='square_mark'></i>
</a>

jQuery

    $('.square_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.polygon_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.polygon_mark').on('click', disabler);
        }
    });
    $('.polygon_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.square_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.square_mark').on('click', disabler);
        }
    });
});

功能:

disabler: function(event) {
    event.preventDefault();
    return false;
},

更改类的功能工作正常，但我想添加到其中，当按下 anchor #1 时，这会禁用另一个 anchor ，当我再次按下它时，我希望它重新启用 anchor ，反之亦然，但对于 anchor #2。

我尝试做这样的事情，但我无法让它工作，也没有完全理解它。

Answer 1

执行此操作并向您的 CSS 添加一个禁用类。

$('.square_mark').click(function () {
        $(this).toggleClass('active');
        $('.polygon_mark').toggleClass("disabled");
});

$('.polygon_mark').click(function () {
        $(this).toggleClass('active');
        $('.square_mark').toggleClass("disabled");
});

这应该可以解决问题。

.disabled {
   pointer-events: none;
   cursor: default;
}

编辑: jsfiddle 上的示例:http://jsfiddle.net/uKCYN/

如果您需要检查事件类来执行其他操作，您可以像这样编写代码:

$('.square_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.polygon_mark').toggleClass("disabled");
});

$('.polygon_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.square_mark').toggleClass("disabled");
});

并将您的其他内容添加到 if 子句中。