javascript - 使用 onclick 禁用锚点

Question

我在按下锚点时无法禁用它。

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;
},

更改类的功能工作正常，但是我想添加到其中，当锚点 #1 被按下时，这会禁用另一个锚点，当我再次按下它时，我希望它重新启用锚点，反之亦然，但对于锚 #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 子句中。

Answer 2

只需像这样修改处理函数并重试：

// handler function
function disabler(event) {
    event.preventDefault();
    console.log('item anchor clicked');
}