javascript - 仅使用 setTimeout 获取计算样式

Question

我正在尝试获取 span 元素的计算样式 (background-color)。这是我的 HTML，基本上是两个 label 元素，里面有一个 input 和一个 span 元素:

<label>
  <input type="radio" name="numbers" value="01" checked/>
  <span id="first-span">01</span>
</label>
<label>
  <input type="radio" name="numbers" value="02" />
  <span>02</span>
</label>

一个简单的 CSS，用于在选中相应的 input 时更改 span 的 background-color:

input:checked + span {
  background-color: rgba(0, 0, 0, 0.1);
}

还有 JavaScript，我在点击事件中调用函数 handleClick，负责在控制台中打印第一个 的计算 background-color跨度元素:

var span = document.getElementById('first-span');

function handleClick(e) {
  e.preventDefault();
  var computedStyle = window.getComputedStyle(span, null);
  console.log(computedStyle.backgroundColor);
}

var numbers = document.getElementsByName('numbers');
for (var i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener('click', handleClick, false);
}

即使我在 handleClick 函数中调用 e.preventDefault()(因此检查的输入不会改变)，我也会得到不同的 background-color 值。如果单击第一个 input，我会得到正确的值:rgba(0, 0, 0, 0.1)。但是，如果单击第二个 input，我会得到错误的 transparent 值。

我发现的解决方法是将代码放在 setTimeout 中，例如:

function handleClick(e) {
  e.preventDefault();
  setTimeout(function(){
    var computedStyle = window.getComputedStyle(span, null);
    console.log(computedStyle.backgroundColor);
  }, 0);
}

这行得通，但我真的不喜欢它。所以问题是:

Can you provide a solution without using setTimeout? An explanation about why this happens would be great too, but not required actually :)

检查演示:

• > Not working properly (without setTimeout)
• > Working using setTimeout

Answer 1

如果您在调用 .preventDefault() 时设置断点，则可视单选按钮已更改为选中第二个输入并应用 CSS 更改。然后它会在您的代码执行后变回。

如果您 .preventDefault click 事件，但在 mouseup 事件期间检查 getComputedStyle() ，然后它会按预期工作。

---

编辑:

The DOM3 spec状态:

Default actions should be performed after the event dispatch has been completed, but in exceptional cases may also be performed immediately before the event is dispatched.

The default action associated with the click event on <input type="checkbox"> elements toggles the checked IDL attribute value of that element. If the click event's default action is cancelled, then the value is restored to its former state.

因此，浏览器以默认操作首先发生的方式实现控件似乎是可以接受的，然后调用您的 click 处理程序，然后浏览器“阻止默认操作”通过撤消它已经完成的操作。

至少对于 Chrome 和单选按钮来说似乎是这样。它:

1. 将单选按钮的“选中”状态更改为单击的状态(第二个)
2. 然后调用您的处理程序(它现在看到第二个输入被点击，而不是第一个)
3. 您的处理程序调用 .preventDefault() 来标记要取消的事件(不会立即取消)
4. 看到事件上的取消标志，并将第一个单选按钮设置回“选中”