Question

这可能吗？

例如，如果用户按下“return”键并触发“mousedown”事件，我该如何使用：active styles呈现元素？

我知道可以使用类来执行此操作，但我更喜欢使用预先存在的：活动样式。

Answer 1

根据CSS 2.1 spec，：active伪类适用于：

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

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

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

修改

以下是使用DOMActivate的示例。您可以看到，在元素上调度activate事件会触发关联的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>

使用Javascript激活元素的：活动CSS伪类？

1 个答案:

修改