Javascript-将onclick设置为仅页面的第一部分

Posted 2021-03-19

我正在开发此站点：https://studioboom.superhi.com/

是否可以将图像单击仅应用于第一部分，所以一旦滚动，您就可以单击链接而不是添加图像。

JS：

const images = [
  'benjones_flip1.jpg',
  'benjones_home1.jpg',
  'ben_jones_ts2.jpg',
  'benjones_gs1.jpg',
  'benjones_jt1.jpg',
  'benjones_dlf4.jpg'
]

let i = 0

function placeImage(x, y) {
  const nextImage = images[i]
  const img = document.createElement('img')

  img.classList.add('external-loaded-img')
  img.setAttribute('src', nextImage)
  img.style.left = x + 'px'
  img.style.top = y + 'px'

  document.body.appendChild(img)

  i = i + 1

  if (i >= images.length) {
    i = 0
  }
}

document.addEventListener('click', function(event) {
  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

document.addEventListener('touchend', function(event) {
  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

.external-loaded-img {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.5);
  animation: fadein 0.5s;
  z-index: 10;
  overflow: hidden;
}

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

答案

要么等待设置事件处理程序，直到要应用它们的元素的容器出现在页面中，然后在该容器上挂接处理程序：

container.addEventListner('click', /*...*/);
container.addEventListner('touchend', /*...*/);

...或让他们与document保持联系，但请检查事件何时发生通过该容器（“事件委托”）：

document.addEventListner('click', function(event) {
    if (!event.target.closest("selector-for-the-container")) {
        return;
    }
    // ...
});
document.addEventListner('touchend', /*...*/);
    if (!event.target.closest("selector-for-the-container")) {
        return;
    }
    // ...
});

关于closest on MDN的更多信息，如有需要，包括有关填充料的信息。

另一答案

document.querySelector(".about").addEventListener('click', function(event) {
  event.preventDefault()
  placeImage(event.pageX, event.pageY)
})

另一答案

类似的事情确实有用，如果我单击section.photo1，如果我单击实际图像，则无效。有没有解决的办法？

document.addEventListener('click', function(event) {
   if (!event.target.closest("section.photo1")) {
        return;
    }
event.preventDefault()
  placeImage(event.pageX, event.pageY)
})