图片中添加点击事件后没有反应的问题分析

最新推荐文章于 2024-04-20 13:23:26 发布
最新推荐文章于 2024-04-20 13:23:26 发布
阅读量5.5k 收藏
点赞数
分类专栏： 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25175063/article/details/77963448
版权

一、今天在项目里面用到一个图片需要添加一个点击事件，代码如下：

<img id="sign" src="../../image/sign.png" class="cp-sign" οnclick="sign()">

 

结果发现事件触发不了，报sign 不是一个函数

 

二、查阅相关文档发现，img在添加点击事件的时候，它的id和onclick的名称是不能相同的，改变一下代码为；

<img id="sign1" src="../../image/sign.png" class="cp-sign" οnclick="sign()">

就可以了，

 

三、同样，name名称和事件名字也是不能相同的。

 

四、共勉

也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://www.guangmuhua.com

卢浮宫丶晓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cliq:cliq 让你知道在网页中点击了什么
06-08
1. **点击追踪**：CLIQ 能够记录用户在网页上每一次的点击事件，包括链接、按钮、图片等元素。这些数据可以帮助你理解用户对页面布局的响应。 2. **实时反馈**：CLIQ 提供实时的数据更新，让你能够在用户使用网站的...
js随机飘动的广告图片代码
11-11
5. **事件处理**：如果希望用户点击广告后有特定反应，如跳转到其他页面，需要添加事件监听器（addEventListener）来处理用户的点击事件。 6. **动画框架**：虽然这个例子可能没有使用现代的动画框架，如jQuery或...
jquery 对图片的点击事件失效
涛涛之海
04-04 2641
文章目录应用场景问题描述原因解决方案参考文章 应用场景 问题描述 验证码是从后台生成的，在前台显示，想实现点击图片更换一张，我使用的是click事件，点击无反应，且没有报错，猜测可能没有获取到图片对象。 原因 大多出现在动态添加元素的时候，点击无效，可能验证码图片也是我从后台随机生成的，所以是动态对象。 解决方案 <script type="text/javascript"> fun...
img标签增加点击事件不生效问题解决
yzx3105的博客
06-13 9040
<!--图标--> <div class="col-sm-2 paymentMode-data-materialUrl1"> <input id="materialId1" name="materialId1" type="hidden"/> <input id="materialUrl1" name="materialUrl1" style="width: 156px;height: 78px;" type="image" onclick="open.
HarmonyOS（鸿蒙）——单击事件_对图片的某个位置点击事件鸿蒙
最新发布
2401_84160310的博客
04-20 368
组件就是文本、按钮、图片等元素的统称事件就是可以被组件识别的操作，常见的事件有单击、双击、长按和滑动等。单击事件又称点击事件，单击事件是我们平时操作过程中触发的最多的事件。​。
axure9实用操作设置鼠标单击交互事件为什么没响应
点燃火柴的博客
06-18 1万+
axure9设置鼠标单击交互事件为什么没响应，请检查图层，点击进来查看分析过程
图片阻止父元素的点击事件，导致无法触发跳转
qq_44866810的博客
11-06 168
原因：在某些情况下，图片可能会阻止父元素的点击事件，导致无法触发跳转。这可能是因为图片元素的点击事件冒泡到了父元素，而父元素的点击事件被图片元素捕获并处理了。问题：盒子里面包含图片，盒子有跳转事件，但是在百度浏览器中点击一直展示图片，不跳转。这样的设置可以确保图片不会阻止盒子的跳转事件。，这意味着该元素可以接收鼠标事件。，这意味着图片元素不会接收鼠标事件。需要阻止图片的冒泡行为。
点击图片不响应的原因
More reading and learning to become excellent
09-14 642
#import "TapImageView.h" @implementation TapImageView - (void)dealloc {// _t_delegate = nil; } - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { ...
安卓Android源码——测试反应能力源码.zip
10-14
开发者可能使用`ImageView`来显示这个图片，并添加触摸事件监听器来处理用户的点击。 在游戏逻辑方面，Android提供了`Handler`和`Runnable`接口来处理异步任务和定时事件。比如，游戏可能使用`Handler`来在一定时间...
Android应用源码之测试反应能力源码.zip
12-17
2. **事件监听**：通过`OnClickListener`监听用户点击事件，开始游戏或记录反应时间。 3. **计时器（Timer）**：使用`Handler`或`CountDownTimer`实现倒计时，增加游戏紧张感。 4. **动画**：利用`ObjectAnimator`...
3D图片效果案例.zip
07-02
在IT行业中，3D图片效果是一种利用计算机图形学技术实现的视觉艺术形式，它能够为用户提供更为生动、立体的视觉体验。"3D图片效果案例.zip"这个压缩包可能包含了多个展示3D图像处理和动画效果的实例，可能是用于教学...
img标签点击事件失效的坑
qq_37730779的博客
09-17 4236
img中出现name值或id值与click事件名相同的时候点击会无效。
click 点击图片不起作用_Python新手爬虫：爬取搜狗图片（动态）
weixin_42565652的博客
12-06 292
搜狗图片地址：https://pic.sogou.com/?from=category先上最后成功的源码：import requests import urllib import json from fake_useragent import UserAgent def getSougouImag(category,length,path): n = length cate = ...
JSP 页面中的 img 标签添加 onclick 事件失效
给我一根筷子，我能撬动整个地球
06-29 3975
我的 <img> 标签是这样写的： <img alt="" src= "images/icon_car.gif" onclick="findMerById(${mer.id})"> onclick 事件是放在 src 属性后面的，经过测试，这个事件就是没有触发。代码虽然没有错误，但是这是出现了一个警告：Undefined attribute name (οnclick) 我的 JSP 页面不止定义了一个 <img> 标签，其他的标签也添加了 onclick 事件，但是没
【CSS】解决上层盒子遮挡下层图片点击事件的三种方法
y_coder的博客
11-10 2003
在Web开发中，我们有时候会遇到一个常见的问题：上层盒子的点击事件遮挡了下层图片的点击，导致用户无法与图片进行交互。本篇博客将介绍三种解决这个问题的方法，通过使用CSS和JavaScript，使得上层盒子在视觉上处于上层，但不影响下层图片的点击事件。
WEB前端问题——img标签的onclick事件无法响应问题
热门推荐
lin505494784的专栏
04-22 3万+
一个纠结了一下午的问题，imgbqian
H5怎么禁止点击图片跳出图片的问题
敲门的小白
11-27 2225
解决： 1 css设置img{pointer-events: none; } 这种方式可以解决这个问题，但是当如果你在此时的img上绑定点击事件，点击图片时这个事件将不会被触发。这种情况可以使用一个带点击事件的元素包裹这个img解决。 2 js阻止浏览器默认行为 document.body.addEventListener(‘click’,function(e){ e.preventDefault(); }); 3 将图片显示改为背景图显示 ...
动态添加点击事件_html中如何给图片添加点击事件的详解
05-14
在HTML中，给图片添加点击事件可以通过JavaScript来实现。具体步骤如下： 1. 给图片添加id或class属性，以便在JavaScript中获取到该元素。 ```html <img src="image.png" id="myImage"> ``` 2. 在JavaScript中获取该图片元素，并添加点击事件。 ```javascript var img = document.getElementById("myImage"); // 获取图片元素 img.onclick = function() { // 点击事件处理逻辑 }; ``` 3. 在点击事件处理逻辑中，可以添加任意需要执行的代码，比如弹出提示框、跳转页面等。 ```javascript img.onclick = function() { alert("您点击了图片！"); }; ``` 完整的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>图片点击事件示例</title> <meta charset="utf-8"> <script> window.onload = function() { var img = document.getElementById("myImage"); // 获取图片元素 img.onclick = function() { alert("您点击了图片！"); }; }; </script> </head> <body> <img src="image.png" id="myImage"> </body> </html> ``` 以上就是动态添加点击事件的详细步骤。需要注意的是，如果页面中有多个图片需要添加点击事件，应该为每个图片元素分别添加id或class属性，并在JavaScript中分别获取处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值