首页
学习
活动
专区
工具
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、代码如下: 第一版: <a href="<em>img</em>/index.jpg...若返回<em>的</em>值是true,<em>onclick</em>事件处理函数就认为这个函数被<em>点击</em>了,若为false,就相反;所以加上return false,就可以防止用户被带到目标链接窗口; 注意:return false;只在...:<em>点击</em>超链接把图片<em>的</em>描述显示到图片<em>的</em>下面代码如下:第三版: 图片一<

    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"> 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?

    20121

    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

    ASP.NET生成随机验证码代码和看不清切换验证码小结

    = 0)    {     lblMessage.Text = "验证码错误,请输入正确验证码。"..." id="safecode" alt="看不清,点击换张验证码">a> 在reloadcode函数中,我们在code.asp后面加了一个随机参数,这样每次链接地址都不一样,从而达到更新目的。..."manage_product_checkCode.aspx" id="safecode" alt="看不清,点击换张验证码"/>     <a href="<em>javascript</em>:reloadcode(...当然js<em>不能</em>作图,但是可以用js模拟做验证码<em>的</em> 于是花了20分钟按照我<em>的</em>想法尝试做,最后做出来比我想象中<em>的</em>效果还要好,呵呵 先贴个图看看代码: <!...,'C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//<em>所有</em>候选组成验证码<em>的</em>字符

    1.8K40

    事件

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

    1.4K30

    在开发中实现点击 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

    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.8K10
    领券