javascript - 检查按钮点击事件并做一些事情，如果用户点击其他地方则删除它们

Question

我将 onclick 函数附加到按钮#1，根据此函数，我正在更改其他按钮的不透明度并禁止用户单击它们。 但是我想撤消已更改的onclick事件，使其他按钮正常。 我的 javascript 和 jquery 代码如下；

btnLink.onclick = function(e) {
    var divToShow = document.getElementById('linkNewDiv');
    console.log('clicked');
    divToShow.style.display = 'inherit';
    $(btnVideo).prop('disabled',true);
    $(btnVideo).addClass('opacityReducing');
    $(btnPicture).addClass('opacityReducing');
    $(btnPublish).addClass('opacityReducing');
    $(btnPicture).prop('disabled',true);
    $(btnPublish).prop('disabled',true);
    $(btnCheck).addClass('opacityReducing');

我想不通。如果用户在我正在更改元素样式的元素之外单击并通过再次编写所有这些代码来禁用属性，我找到了一种方法。有更好的解决方案吗？谢谢:)

Answer 1

您可以使用 stopPropagation() 实现此目的。我对您的代码进行了一些更改以使其更具可读性，请检查:

$(document).on('click', function(e) {
    console.log('clicked');
    $('#linkNewDiv').css("display", "inherit");
    $(btnVideo, btnPicture, btnPublish).removeClass('opacityReducing').prop('disabled', false);
    $(btnCheck).removeClass('opacityReducing');
});
$('#bnLink').on('click', function(e) {
    e.stopPropagation();
    console.log('clicked');
    $('#linkNewDiv').css("display", "inherit");
    $(btnVideo, btnPicture, btnPublish).addClass('opacityReducing').prop('disabled', true);
    $(btnCheck).addClass('opacityReducing');
});