버튼 클릭 이벤트를 확인하고 사용자가 다른 곳에서 클릭하면 무언가를 수행하고 제거합니다.

Question

버튼 # 1에 onclick 기능을 연결하고이 기능에 따라 다른 버튼의 불투명도를 변경하고 사용자가 클릭 할 수 없게합니다. 그러나 onclick 이벤트가 변경된 것을 취소하여 다른 버튼을 정상적으로 만들고 싶습니다. 내 자바 스크립트 및 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'); 

}

나는 그것을 파악하는 관리 couldnt한다. 사용자가 요소의 바깥을 클릭하면 요소 스타일을 변경하고 이러한 코드를 모두 다시 작성하여 속성을 사용하지 않으면 한 가지 방법을 발견했습니다. 더 나은 솔루션? 감사합니다 :)

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'); 
});