主页 / coding / 问题 / 77478965
Accepted
Math
Asked: 2023-11-14 15:54:21 +0800 CST

如何防止图像src被连续设置？

  • 772

我正在做一件小事，我需要检查是否img.src已经设置，以防止它像现在一样连续设置。问题出在我的onMove. 我怎样才能做到这一点？

HTML：

<div data-tail></div>

<button type="button" data-src="./dist/img/1.jpg">
  text 1
</button>
<button type="button" data-src="./dist/img/2.jpg">
  text 2
</button>
<button type="button" data-src="./dist/img/3.jpg">
  text 3
</button>

JS：

const tail = document.querySelector('[data-tail]') 

window.addEventListener('mouseenter', onEnter)
window.addEventListener('mousemove', onMove)

onEnter(e) {
  let img = new Image()
  tail.appendChild(img)

  gsap.to(tail, {
    autoAlpha: 1,
    duration: 0.25
  })
}

onMove(e) {
  const el = e.target

  if (el.type == 'button') {
    const img = tail.querySelector('img')
    img.src = el.dataset.src
  }

  gsap.to(tail,{
    x:e.clientX,
    y:e.clientY
  })
}
javascript

2 个回答

  1. Best Answer

    Yoy 可以检查该src属性是否已经设置，例如：

    if (el.type == 'button') {
    const img = tail.querySelector('img');
    img.src = img.src || el.dataset.src;
}

    更新：我想你想要这样的东西：

    if (el.type == 'button') {
    const img = tail.querySelector('img');
    if (img.src !== el.dataset.src) {
        img.src = el.dataset.src;
    }
}
    • 1

  2. 您可以使用该mouseover事件，该事件会冒泡：

    const tail = document.querySelector('[data-tail]') 

window.addEventListener('mouseenter', onEnter)
window.addEventListener('mouseover', onOver)
window.addEventListener('mousemove', onMove)

function onEnter(e) {
  let img = new Image()
  tail.appendChild(img)

  gsap.to(tail, {
    autoAlpha: 1,
    duration: 0.25,
  })
}

function onOver(e) {
  const el = e.target

  if (el.type == 'button') {
    const img = tail.querySelector('img')
    img.src = el.dataset.src
  }
}

function onMove(e) {
  gsap.to(tail, {
    x: e.clientX,
    y: e.clientY,
  })
}
    • 1

相关问题