使用 javascript 防止标签活动状态

Question

我有一个相当 simple scenario，我试图阻止鼠标按下时的橙色背景：

document.querySelector('label').addEventListener('mousedown', (event) => {
  console.log('mouse down') 
  event.preventDefault();
})

label:active {
  background: orange;
}

<label>Press mouse down</label>

很遗憾，event.preventDefault() 无效，标签变为橙色。 （在 Chrome 和 Safari 和 IE11 中测试）

谁能解释一下这背后的原因，或者告诉我如何在没有黑客攻击的情况下以编程方式防止活动状态？

Codepen：https://codepen.io/anon/pen/pPZVrO

Answer 1

It seems like an old issue。如果需要，可以使用 pointer-events 属性修复它。此外，support 也相当不错（包括 IE11）

label:active {
  background: orange;
}

label {
  pointer-events: none;
}

<label>Press mouse down</label>

确保您在label 元素上声明了一些class 或id，这样您就不会针对所有这些。

---

JavaScript 解决方案 - 试一试

这个想法是在mousedown 上添加一个class 并用具有:active 伪class 的CSS class 覆盖它，然后在mouseup 上删除class .. 类似

var overrideActive = function() {
  var labelElm = document.querySelector('label');
  var bodyElm = document.querySelector('body');

  function init() {
    //on mousedown, add a class and override it with css
    labelElm.addEventListener('mousedown', (event) => {
      event.target.className = 'disable-active';
    });

    //onmouseout get rid of the class
    bodyElm.addEventListener('mouseup', (event) => {
      labelElm.classList.remove('disable-active');
    });
  }

  return {
    init: init
  }
}();

overrideActive.init();

label:active {
  background: orange;
}

.disable-active:active {
  background-color: transparent;
}

<label>Press mouse down</label>

Answer 2

您可以通过 css 禁用鼠标事件。添加此 CSS 将防止背景变为橙色。

label {
  pointer-events: none;
}

如果您不想在每种情况下都这样做，请使用一个类并仅在需要时应用 noclick 类（即，作为 react 的 render() 方法的一部分，或者在生成页面时，取决于您正在使用的框架。

.noclick {
  pointer-events: none;
}