检查按钮单击事件并执行某些操作并在用户单击其他位置时将其删除答案

【问题标题】：Checking button click event and doing something and removing them if user clicks elsewhere检查按钮单击事件并执行某些操作并在用户单击其他位置时将其删除
【发布时间】：2018-04-20 02:33:33
【问题描述】：

我在按钮#1 上附加了一个 onclick 函数，根据这个函数，我正在更改其他按钮的不透明度并禁止用户点击它们。但我想撤消已更改的 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');

}

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

【问题讨论】：

您需要在类和道具禁用之间切换？不清楚
当用户在按钮父级之外单击时，我想将元素更改为它们在 html 和 css 中定义的旧状态。当用户单击它并禁用其他按钮提交而不向输入输入值时，我正在显示输入区域和一个图标

标签： javascript jquery html css web-applications

【解决方案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');
});

【讨论】：