Javascript 更新不适用于Chrome但适用于Firefox的按钮的aria checked属性

我尝试使用JS更新切换按钮的aria checked属性。它在Firefox上运行良好，但无法在Chrome上切换

当我登录JS时，很明显属性被更新了。但当我使用Chrome devtool查看时，实际的UI上没有

给你

---

e.target

由于事件传播，正在Chrome中选择范围，而不是绑定事件的按钮

使用

e.currentTarget

而不是

e.target

，它将选择事件最初绑定的按钮，而不是其任何子元素

// Rectangular switch
const rect = document.querySelector("#toggle-rect");
rect.addEventListener("click", e => {
  let checked = e.currentTarget.getAttribute("aria-checked") === "true";
  console.log(checked);
  e.currentTarget.setAttribute("aria-checked", String(!checked));
});

// Rounded switch
const round = document.querySelector("#toggle-round");
round.addEventListener("click", e => {
  let checked = e.currentTarget.getAttribute("aria-checked") === "true";
  console.log(checked);
  e.currentTarget.setAttribute("aria-checked", String(!checked));
});

//矩形开关
const rect=document.querySelector（“toggle rect”）；
rect.addEventListener（“单击”，e=>{
let checked=e.currentTarget.getAttribute（“aria checked”）=“true”；
控制台日志（选中）；
e、 setAttribute（“aria已选中”，字符串（！已选中））；
});
//圆形开关
const round=document.querySelector（#toggle round”）；
round.addEventListener（“单击”，e=>{
let checked=e.currentTarget.getAttribute（“aria checked”）=“true”；
控制台日志（选中）；
e、 setAttribute（“aria已选中”，字符串（！已选中））；
});
/*重置按钮*/
钮扣{
背景：无；
边界：0；
颜色：继承；
填充：0；
}
/*开关-滑块周围的框*/
.开关{
位置：相对位置；
/*显示：内联块*/
宽度：60px；
高度：34px；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
/*TODO:在此处放置禁用颜色*/
-webkit转换：0.4s；
过渡：0.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：0.4s；
过渡：0.4s；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196f3；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}
/*切换时更改背景*/
[role=“switch”][aria checked=“true”].滑块{
背景色：#2196f3；
}
/*扳动手柄*/
[role=“switch”][aria checked=“true”].滑块：在{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
它就像一个符咒。非常感谢。最后一个问题，e.currentTarget（）是e.target（）上的go-to方法吗？阅读这篇文章，它将帮助您理解其中的区别。
// Rectangular switch
const rect = document.querySelector("#toggle-rect");
rect.addEventListener("click", e => {
  let checked = e.currentTarget.getAttribute("aria-checked") === "true";
  console.log(checked);
  e.currentTarget.setAttribute("aria-checked", String(!checked));
});

// Rounded switch
const round = document.querySelector("#toggle-round");
round.addEventListener("click", e => {
  let checked = e.currentTarget.getAttribute("aria-checked") === "true";
  console.log(checked);
  e.currentTarget.setAttribute("aria-checked", String(!checked));
});