javascript - 使用 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 中测试)

任何人都可以向我解释这背后的原因，或者可以告诉我如何在没有黑客的情况下以编程方式防止事件状态吗？

代码笔: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 的 CSS class 覆盖它伪 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>