Skip to content

使用原生js实现以下效果:点击容器内的图标,图标边框变成border:1px solid red,点击空白处重置

Posted on:2022年10月30日 at 11:13
const box = document.getElementById("box");

function isIcon(target) {
  return target.className.includes("icon");
}

box.onclick = function (e) {
  e.stopPropagation();
  const target = e.target;
  if (isIcon(target)) {
    target.style.border = "1px solid red";
  }
};

const doc = document;

doc.onclick = function (e) {
  const children = box.children;
  for (let i = 0; i < children.length; i++) {
    if (isIcon(children[i])) {
      children[i].style.border = "none";
    }
  }
};
原文转自:https://fe.ecool.fun/topic/c3faa4b5-e73e-47f6-af7b-1f9c73d74126