css 为什么addEventListener对appendChild不起作用？

hkmswyz6 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(111)

我在加载网页时创建了两个“a”元素，如下所示，默认类为“link-block-2”，并带有自定义ID。然后，我在“a”元素中添加了一个图像：

function creatediv(div_projectname) {
  var div1 = document.createElement('a');
  div1.className = "link-block-2";
  div1.setAttribute("id", `${div_projectname}_btn`);
  document.getElementById('div-container-other-projects').appendChild(div1); 
  //add div for image
  var divimage = document.createElement('div');
  divimage.className = "div-block-7";
  document.getElementById(`${div_projectname}_btn`).appendChild(divimage)
}

这是最终的结果：

<div class="div-block" id="div-container-other-projects">
      <a class="link-block-2" id="p1_btn"><div class="div-block-7" id="p1_btn"></div></a>
      <a class="link-block-2" id="p2_btn"><div class="div-block-7" id="p2_btn"></div></a>
      <a class="link-block-2" id="p3_btn"><div class="div-block-7" id="p3_btn"></div></a>
      <a class="link-block-2" id="p4_btn"><div class="div-block-7" id="p4_btn"></div></a>
    </div>

我有一个函数可以检测我点击了哪个“a”元素：

const buttonscontainer = document.getElementById('div-container-other-projects')
buttonscontainer.addEventListener('click', event => {
  const target = event.target
  if (target.className !== 'link-block-2') return
  Array.from(buttonscontainer.children).forEach(child =>
    child.classList.remove('link-block-2--selected'))
  target.classList.add('link-block-2--selected')
})

这不起作用的原因是，当我单击附加了图像的div时（id=“p1_btn”，“p2_btn”..）由于z-index值的原因而无法识别我的点击。我认为默认情况下，我在“a”元素后附加图像的div具有比“a”更上级的zindex值，但无论我在css类上放置什么（zindex=100，位置绝对，相对..）我追加的最后一个div的zindex大于前面的“a”，并且单击事件侦听器不工作...
我已经尝试了很多其他的解决方案，并没有真正的工作，因为我想要的，任何人都可以帮助？
谢谢！：）

css

来源：https://stackoverflow.com/questions/74944193/why-addeventlistener-not-working-on-an-appendchild

1条答案

按热度按时间

smdnsysy1#

一个可以尝试的方法是将click事件侦听器绑定到div-block-7元素而不是link-block-2元素，这样，当您单击div-block-7元素时，事件将被触发，然后您可以使用target.parentElement修改link-block-2元素。
下面是一个示例，说明如何执行此操作：

const buttonscontainer = document.getElementById('div-container-other-projects')
buttonscontainer.addEventListener('click', event => {
  const target = event.target
  if (target.className !== 'div-block-7') return

  Array.from(buttonscontainer.children).forEach(child => {
    const linkBlock = child.firstElementChild
    if (linkBlock.classList.contains('link-block-2--selected')) {
      linkBlock.classList.remove('link-block-2--selected')
    }
  })

  target.parentElement.classList.add('link-block-2--selected')
})

或者，您可以尝试在CSS中使用pointer-events属性来允许link-block-2元素接收click事件，即使它被div-block-7元素覆盖。您可以将link-block-2元素的pointer-events属性设置为auto，如下所示：

.link-block-2 {
  pointer-events: auto;
}

这应该允许link-block-2元素接收click事件，即使它被div-block-7元素覆盖。

赞(0）回复(0）举报 2022-12-30

我来回答

css 为什么addEventListener对appendChild不起作用？

1条答案

相关问题

热门标签

最新问答