首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Javascript img onclick总是点击所有img,不能捕捉正确的img点击

在JavaScript中,可以通过给img元素添加onclick事件来捕捉点击事件。然而,如果将相同的onclick事件应用于多个img元素,点击任何一个img元素都会触发该事件。为了解决这个问题,可以使用事件委托(event delegation)的方式来处理。

事件委托是一种将事件处理程序添加到父元素而不是每个子元素的技术。通过将事件处理程序添加到父元素,可以利用事件冒泡的特性来捕获子元素的事件。在这种情况下,可以将onclick事件添加到包含所有img元素的父元素,然后通过判断事件的目标元素(event.target)来确定点击的是哪个img元素。

以下是一个示例代码:

HTML:

代码语言:txt
复制
<div id="imageContainer">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

JavaScript:

代码语言:txt
复制
var imageContainer = document.getElementById("imageContainer");

imageContainer.addEventListener("click", function(event) {
  if (event.target.tagName === "IMG") {
    // 点击了img元素
    var clickedImage = event.target;
    // 执行相应的操作
    console.log("点击了图片:" + clickedImage.alt);
  }
});

在上面的代码中,我们将onclick事件添加到id为"imageContainer"的父元素上。当点击任何一个img元素时,事件会冒泡到父元素,并通过判断事件的目标元素是否为img元素来确定点击的是哪个img元素。然后,可以执行相应的操作,例如打印被点击的图片的alt属性。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法提供相关链接。但是,腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

事件基础及操作元素

事件概述 JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。 简单理解: 触发--- 响应机制。...网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个 事件,然后去执行某些操作。 1.2....('btn');        //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下        //(3) 事件处理程序 通过一个函数赋值的方式...= '被点击了';            // 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用            // btn.disabled =...onblur        // 如果输入正确则提示正确的信息颜色为绿色小图标变化        // 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化        // 因为里面变化样式较多

1.4K20
  • JavaScript图片库

    将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观。...我们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;所以利用JavaScript来创建一个图片库将是最佳的选择; 说下步骤: 第一步:把整个图片库的链接都加载到图片库的主页里; 第二步:当用户点击对应的超链接时...,拦截网页的默认行为,即(超链接点击跳转行为); 第三步:当用户点击对应的超链接后,把"占位符"图片替换成那个超链接所对应的图片; 1、代码如下: 第一版: img/index.jpg...若返回的值是true,onclick事件处理函数就认为这个函数被点击了,若为false,就相反;所以加上return false,就可以防止用户被带到目标链接窗口; 注意:return false;只在...:点击超链接把图片的描述显示到图片的下面代码如下:第三版: javascript:void(0);" title="img/index.jpg">图片一<

    3.7K60

    第85节:Java中的JavaScript

    第85节:Java中的JavaScript 复习一下css: 选择器的格式: 元素选择器:元素的名称{} 类选择器:....边框:盒子的边框 外边距: 盒子和盒子之间的距离 轮播图 自动播放:每隔3秒切换,切换图片, // 点击弹框 // 确定事件,点击事件 // 通过事件定义函数 // 在函数里定义操作页面元素...="点击切换图片" onclick="changeImg()" /> img src=".....// 所有单元格 rows[] 返回包含表格中所有行的一个数组 tBodies[] 返回包含表格中所有tbody的一个数组 ?...:节点元素的子节点 attributes:节点的属性节点 getElementById(): 返回带有指定ID的元素 getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表

    2.6K20

    复习 - XSS

    漏洞产生的原因是攻击者注入的数据反映在响应上,一个典型的非持久型XSS包含一个带XSS攻击向量的链接,即每次攻击需要用户点击。...插入Payload点击搜索,然后点击输入框 123' onclick='alert(1) level 4 和上一题差不多,只是此处换成了双引号"闭合。...插入Payload后点击搜索,然后点击输入框 1" onclick="alert(1) level 5 (javascript协议) 和上一题一样用双引号绕过,但是过滤了onclick,onmousemove...这里使用a标签触发javascript,搜索后点击超链接 1"> javascript:alert(1)"> level 6 (大小写绕过) 大小写过滤,搜索后点击超链接 " ><a...t_sort=111 这里一开始尝试使用autofocus和onfocus自动聚焦触发,但是发现有时候不能触发,或者触发了后会一直弹框而不能正常跳转到下一关 level10.php?

    1.3K30

    C#进阶-ASP.NET实现可以缩放和旋转的图片预览页

    在Visual Studio中,右键点击你的项目,选择添加 -> 新建项。选择Web 窗体,命名为 IMGShow.aspx。2....添加控制按钮在图片展示区的下方,我们需要添加四个按钮,用于放大、缩小、左旋转和右旋转图片。每个按钮都绑定相应的JavaScript函数,点击后会执行特定的图片操作。...测试并调整最后,保存所有文件并运行项目。在浏览器中访问该页面,确保所有按钮功能正常工作。如果需要,可以根据需求进一步调整样式或功能。...通过点击页面下方的按钮,用户可以进行以下操作:放大图片:点击放大按钮,图片的宽度和高度按比例增大。缩小图片:点击缩小按钮,图片的宽度和高度按比例减小。左旋转图片:点击左旋转按钮,图片逆时针旋转90度。...最终效果如图所示:作为图片的预览页,我们一般会在点击图片时的事件中调用,下面提供两种常用的调用策略:页面跳转:用 window.location.href='IMGShow.aspx?

    22043

    android webview加载html图片自适应手机屏幕大小&点击查看大图

    (new JavaScriptInterface(this), "imagelistner");//这个是给图片设置点击监听的,如果你项目需要webview中图片,点击查看大图功能,可以这么添加 2....()方法,下面介绍的时点击webview图片查看大图。...点击详情图片查看大图 (1)注入js脚本,设置图片点击函数openImage private void addImageClickListner() { // 这段js函数的功能就是,遍历所有的...img节点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去 bindingView.contentWv.loadUrl("javascript...,遍历所有的img节点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去        bindingView.contentWv.loadUrl("javascript

    6.4K10

    可以被XSS利用的HTML标签和一些手段技巧

    可以成功执行的标签 javascript:confirm('a')" >1 a标签 当点击时才会触发   img src=“#“ onclick=“javascript:...alert(‘img:onclick’)“ onerror=“javascript:alert(‘img:onerror’)“ onload=“javascript:alert(‘img:onload’...–src加伪协议js代码不能触发–> onclick=“javascript:alert(‘video:onclick’)“ onerror=“javascript:alert...--这些标签中src加伪协议js代码不能触发,IE8以前的时候可以--> img、video、audio标签   onclick:点击触发   onerror:当src加载不出来时触发   onload...阻止浏览器302跳转 总所总之,浏览器遇到302,301会直接跟进头部的跳转链接,可是有时候XSS界面就是这个跳转页面,这个跳转url是可控的,并且在浏览器显示如果浏览器没有正确跳转,请点击XXX的字样

    4.1K90

    事件

    事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、浏览器、元素或与之相关对象发生特定事情时,浏览器会产生事件。...如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄。事件是某个行为或者触发,比如点击、鼠标移动........这个属性的值应该是可以执行的JavaScript代码,我们可以为一个button添加click事件处理程序 onclick...这样处理,事件处理程序被认为是元素的方法,事件处理程序在元素的作用域下运行,this就是当前元素,所以点击button结果是:btnClick 这样还有一个好处,我们可以删除事件处理程序,只需把元素的onclick...事件对象 在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息。所有浏览器都支持event对象,但支持方式不同。

    1.4K30

    五分钟学会做一个在线抽奖系统,手把手教你抽奖还学不会嘛?

    同时我们还要设置,在点击了开始按钮之后,开始按钮就不能够再点击,只能点击停止按钮;点击了停止按钮之后停止按钮就不能再点击,只能点击开始按钮; 接下来我们就来将上面的思路进行实现。...二、定义存放图片URL的数组 首先我们需要先找到要作为抽奖选项的图片,将其URL存放到字符数组中,以便之后访问。 // 添加所有循环的图片的url var imgArr = ["...../js/jquery-3.3.1.min.js"> JavaScript" type="text/javascript">...// 添加所有循环的图片的url var imgArr = [".....:150px;height:150px;font-size:22px" onclick="imgStop()"> 有问题的小伙伴记得在评论区或者私信留言

    1.5K10

    JS实现图片弹窗效果

    一 点击鼠标实现弹出/隐藏图片 ? 实现原理:一个div做容器,里面包含了二维码图片,把标题(鼠标点击的目标)做一个onclick监听,用div的display属性控制图片的显示和隐藏。...源码: javascript"> function showdiv(){ if(document.getElementById("img_div").style.display...实现原理:当点击标题链接onclick监听或者刷新网页时候,获取隐藏的二维码图片对象并弹出,点击关闭或者二维码图片外的区域则隐藏二维码图片display = "none"。类似上面例子原理。...document.getElementById("myImg").onclick(); //触发一次点击事件 }); javascript">...img01"); //获取弹出图片元素 var captionText = document.getElementById("caption"); //获得文本描述 img.onclick

    23.8K30

    在开发中实现点击 WebView 中的图片,调用原生控件放大展示

    今天我们就来学习一下,如何点击 WebView 中的网页图片,调用原生控件进行放大展示。 其实实现这种交互非常简单,就是通过 JS 调用原生控件。...遍历 html 标签源代码,找到所有的 img 标签节点。 给 遍历到得 img 标签节点加上 onClick 事件。 通过点击加上的 onClick 事件,通过 JS 调用原生控件,展示放大即可。...: mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner"); 这行代码就是 WebView 与 JavaScript...,遍历所有的img标签,并添加onClick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去 mWebView.loadUrl("javascript...+ "for(var i=0;i<objs.length;i++) " + "{" + " objs[i].onclick=function()

    2.4K50

    【Html.js——标签导航栏】卡片化标签页(蓝桥杯真题-1765)【合集】

    :HTML 文档的根元素。 :包含元数据和资源引用。 :设置字符编码为 UTF-8,确保能正确显示各种字符。...item 是当前遍历到的选项卡元素,index 是元素的索引。 item.onclick = () => {...}:为每个选项卡元素添加点击事件处理函数。...items.forEach(item => item.classList.remove("active"));:在点击时,移除所有选项卡元素的 active 类。...用户交互:当用户点击某个选项卡元素时: 根据点击选项卡的索引,为对应的内容元素添加 active 类。 为当前点击的选项卡元素添加 active 类。...移除所有选项卡元素和内容元素的 active 类。 点击事件处理函数被触发。

    5500

    JavaScript做简单的购物车效果(增、删、改、查、克隆)

    比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作。...在html和css都已经设置好了之后,我们就开始写js代码,实现动态的添加和删除。 首先我们先获取所有商品的信息,这个一般情况是从后台数据库那里得到,今天这个是一个简单的例子,我们就直接定义几个商品。...var _children = copy.children;//获取克隆元素的所有子节点,并重新赋值 _children[0].src = pro.img;...;//获取点击的那个元素的父节点的所有子节点,然后再分别获取其中的值 // console.log(mes); var img = mes...= function () {//为删除绑定点击事件 copy.parentNode.removeChild(copy);//点击删除的时候,相当于删除的添加的这一行

    1.9K10
    领券