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

时间:2017-11-07 15:56:02

标签: javascript jquery html css web-applications

我将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');

}

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

1 个答案:

答案 0 :(得分:0)

您可以使用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');
});
相关问题