事件委托帮助，我怎么能只针对<img>标签使用纯 Javascript？
[英]Event Delegation help, how can I ONLY target the <img> tags using Pure Javascript?
问题描述
我正在学习事件委托，我将点击事件放在主父级上，即缩略图。 当我单击底部的图像时，我想将 src 设置为 img class="main" src，但我注意到当我在图像之间单击时，单击缩略图 div 上的其他任何位置，或者按 tab 然后输入我得到 null。 我查看了它，发现我的 event.target 以锚标签以及 div class“缩略图”为目标。 我明白为什么，因为我将点击事件放在缩略图（父级）上，但是有没有办法只能定位 img 标签？
请不要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
每次调用
function时，您都在添加event listener器。 您应该只添加一次event listener器。检查
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>
如何使用JavaScript仅触发img元素触发鼠标悬停事件
[英]how to trigger mouseover event only for an img element using javascript
JavaScript 事件委派不起作用。 我想切换多个元素。 我该怎么做？
[英]JavaScript Event Delegation not working. I want to toggle multiple elements. How I can do it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.