事件委托帮助，我怎么能只针对<img>标签使用纯 Javascript？
[英]Event Delegation help, how can I ONLY target the <img> tags using Pure Javascript?
问题描述
I'm learning event delegation, and I put the click event on the main parent, which is thumbnails.
我正在学习事件委托，我将点击事件放在主父级上，即缩略图。 When I click on an image on the bottom, I want to set the src to the img class="main" src, but I noticed that when I click between the images, click anywhere else on the the thumbnails div, or press tab then enter I get null.当我单击底部的图像时，我想将 src 设置为 img class="main" src，但我注意到当我在图像之间单击时，单击缩略图 div 上的其他任何位置，或者按 tab 然后输入我得到 null。 I looked into it and found that my event.target is targeting the anchor tags, as well as the div class "thumbnails".我查看了它，发现我的 event.target 以锚标签以及 div class“缩略图”为目标。 I understand why, as I put the click event ON the thumbnails (parent), but is there a way I can only target the img tags?我明白为什么，因为我将点击事件放在缩略图（父级）上，但是有没有办法只能定位 img 标签？
Please no jQuery, I want to learn this using pure js, thanks!请不要jQuery，我想用纯js学习这个，谢谢！
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 lang="en"> <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> </main> <script src="https.//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/script.js"></script> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2020-11-26 05:49:42
You are adding the
event listenerevery time thefunctionis called.每次调用function时，您都在添加event listener器。 You should only add theevent listeneronce.您应该只添加一次event listener器。Check the
tagNameto see if thetargetis anIMGand if so, set thesrc, else do nothing检查tagName以查看target是否为IMG，如果是，则设置src，否则不执行任何操作
//Add the event listener once the DOM loads const getThumbnails = document.querySelector('.thumbnails'); getThumbnails.addEventListener('click', function(event) { displaySelected(event); }); //Check if the event target has tagName of IMG function displaySelected(event) { if(event.target.tagName === "IMG"){ const getMainClass = document.querySelector('img.main'); getMainClass.src = event.target.getAttribute('src'); } }
{ 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 lang="en"> <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> </main> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.