我正在學(xué)習(xí)事件委托，我將點擊事件放在主父級上，即縮略圖。當(dāng)我單擊底部的圖像時，我想將 src 設(shè)置為 img class="main" src，但我注意到當(dāng)我在圖像之間單擊時，單擊縮略圖 div 上的其他任何位置，或者按 Tab 然后輸入我得到空。我查看了一下，發(fā)現(xiàn)我的 event.target 目標(biāo)是錨標(biāo)記以及 div 類“縮略圖”。我明白為什么，當(dāng)我將點擊事件放在縮略圖（父級）上時，但是有沒有辦法我只能定位 img 標(biāo)簽？請不要使用 jQuery，我想使用純 js 來學(xué)習(xí)這個，謝謝！function displaySelected() { const getMainClass = document.querySelector('.main'); const getThumbnails = document.querySelector('.thumbnails'); getThumbnails.addEventListener('click', function(event) { getMainClass.setAttribute('src', event.target.getAttribute('src')); console.log(event.target); });}displaySelected();* { box-sizing: border-box;}main { min-width: 250px; padding: 30px;}.hero { height: 200px; margin-bottom: 20px;}.hero img { height: 100%}.thumbnail { display: inline-block; cursor: pointer; height: 60px;}a.thumbnail:hover { box-shadow: 5px 5px 5px gray;}.thumbnail img { max-height: 100%;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <main role="main"> <h1>Image Carousel</h1> <div class="hero"> <img class="main" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/> </div> <div class="thumbnails"> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a> <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a> </div>
事件委托幫助，我如何才能僅使用純 Javascript 定位 <img> 標(biāo)簽？
心有法竹
2023-09-07 17:13:55
