使用 Javascript 激活元素的 :active CSS 伪类？答案

【问题标题】：Activate an element's :active CSS pseudo-class using Javascript?使用 Javascript 激活元素的 :active CSS 伪类？
【发布时间】：2011-12-27 11:04:23
【问题描述】：

这可能吗？

例如，如果用户按下“return”键并且我触发了“mousedown”事件，我如何也使用 :active 样式渲染元素？

我知道使用类可以做到这一点，但我更喜欢使用预先存在的 :active 样式。

【问题讨论】：

这个问题已经被问过很多次了。 stackoverflow.com/questions/311052/…
@Casey-我认为这与您发布链接的问题不同。在那个链接中，问题基本上是如何通过javascript设置伪类。在这里，Evan 似乎在问如何确保已经在 CSS 中设置的伪类实际上是基于 javascript 事件激活的。换句话说，他预设了:active 样式，他正在触发javascript 中的事件，他如何确保这些事件导致该项目被认为是“活动的”。
谢谢@Scott，你是对的 - 我问你是否可以使用 JavaScript 激活 CSS 伪类的样式，而不是反过来。
简短的回答是：这是不可能的。

标签： javascript css

【解决方案1】：

根据CSS 2.1 spec，:active 伪类应用 while:

用户正在激活一个元素。例如，在用户按下鼠标按钮并释放它的次数。

您应该能够以主题元素作为事件目标来调度 mousedown 事件，并且它应该保持活动状态，直到调度匹配的 mouseup 事件。如果它有效，它可能无法在足够多的浏览器上可靠地运行以使其有用。

添加/删除合适的类会更简单（并且支持更广泛）。

编辑

这里是一个使用 DOMActivate 的例子。您可以看到，在元素上调度激活事件会触发关联的 onactivate 侦听器，但不会改变被激活元素的外观。

也许您可以通过监听激活事件来模拟动作，添加一个类以突出显示元素，然后在片刻后使用 setTimeout 或类似方法将其删除。

<style type="text/css">
  p:active {
    background-color: red;
  }
  div:active {
    background-color: green;
  }
</style>

<script type="text/javascript">
  function Init () {
    var p, ps = document.getElementsByTagName('p');
    var d = document.getElementById('div0');

    if (ps.length && ps[0].addEventListener) {

      for (var i=0, iLen=ps.length; i<iLen; i++) {
        p = ps[i];
        p.addEventListener ("DOMActivate", onActivate, false);
      }
      d.addEventListener("DOMActivate", onActivate, false);
    }
  }

  function onActivate () {
    console.log(this.id + ' has been activated');
  }

  function simulateActive(id) {
    var evt = document.createEvent("UIEvents");
    evt.initUIEvent("DOMActivate", true, false, window,1);

    var el = document.getElementById(id); 
    var cancelled = !el.dispatchEvent(evt);

    if(cancelled) {
      console.log("cancelled");

    } else {
      console.log("not cancelled");
    }
  }
</script>

 </head>

<body onload="Init ();">

  <div id="div0">div
    <p id="para0">para0</p>
    <p id="para1">para1</p>
    <button onclick="
      simulateActive('para0');
    ">Activate para</button>
  </div>
  <button onclick="
    simulateActive('para0');
  ">Activate para</button>

</body>

【讨论】：

感谢 RobG。不幸的是，mousedown 事件不会触发 CSS 中的 :active 样式（仅在 WebKit 中测试过）。似乎没有一种简单的方法可以做到这一点。 :-/
有一个 UIEvent interface 具有 DOMActivate 类型，但它似乎不会触发相关的 UI 行为。所以简单的答案是脚本似乎是不可能的。