可以通过以下代码示例来解决此问题:
//选中所有按钮 var buttons = document.querySelectorAll('button');
//给按钮添加点击事件 buttons.forEach(function(button){ button.addEventListener('click', function(){ //当按钮被点击时,停止事件冒泡,防止其他事件干扰 event.stopPropagation(); //更改按钮的选中状态 this.classList.toggle('selected'); }); });
//给网页添加点击事件 document.addEventListener('click', function(){ //取消所有按钮的选中状态 buttons.forEach(function(button){ button.classList.remove('selected'); }); });
这样,当任何网页上的元素被点击时,将会取消所有按钮的选中状态,但是按钮本身被点击时,不会取消其选中状态。
下一篇:按钮元素不可交互