登录  /  注册
首页 > web前端 > js教程 > 正文
js动态添加点击事件常见错误详解
一个新手
发布： 2017-09-20 09:25:52
原创
1787人浏览过

在前端中，我们经常要添加点击事件。尤其是在动态的元素上添加点击事件。经常会添加之后没有反应。
可能的原因：

  1. 点击事件的名称写错
    这种低级的错误经常犯，在js代码中添加的事件其实是没有添加的。两者的名字不同或者，选择器有问题没有选中元素。
    这个问题可以在调试的窗口选中元素在监听事件中去查看有没有添加上监听事件
    如图：
    这里写图片描述
    就已经添加上了点击事件，如果没有。那么检查你的变量名和选择器。

  2. 在调试中明明添加到了点击事件，但是就是没有响应
    今天就遇到了这个问题，这种问题就两种可能。

    ①有另外一个事件和他的功能相反，也执行了这就是事件的冒泡。所有没有反应，其实事件是执行了。打断点也可以进入断点。那么解决问题的办法有两种

一是直接return false 阻止了事件的冒泡同时也阻止了行为 代码如下

$("selector").on('click',function(){
            return false;
        });
登录后复制

二是使用 event.stopPropagation 来组织冒泡，这个只会阻止事件的冒泡，并不会阻止行为的冒泡 代码如下

$("selector").on('click',function(){
             event.stopPropagation();
        });
登录后复制

②布局的问题，点击事件加上了。但是没有点击到这个元素，所以时间没有触发。可能的原因就是，给这个元素定位之后有一个z-index属性设置了负值所以没有点击到这个元素。把这个属性改掉就可以了

以上就是js动态添加点击事件常见错误详解的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript 常见 事件
来源：php中文网
上一篇：Node.js中通用基础设计模式介绍 下一篇：微信小程序视频，音乐，图片组件详解
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在PHP中，使用数组切片通过数组_slice函数可以更容易地编写代码。 我有两个数组，需要根据它们的元素总数来显示每个数组的元素，但是如果其中一个数组只有1个元素，那么就按照元素总数显示另外的数组的元素。 这样，数组1的元素将按元素总数顺序显示，...
P粉194541072来自于2023-08-07 16:41:02
0 1 129
Docker:在执行Laravel artisan命令时遇到连接拒绝错误 我'mrunningLaravel5.4inDocker.Thisismydocker-compose.ymlfile:版本:“2 'services:应用:container_n...
P粉787820396来自于2023-08-07 16:24:22
0 2 247
将TypeScript/Angular客户端生成的服务器端文本文件中的问题 "问题在于，我试图将文本内容写入服务器端文件，作为对Client浏览器请求的响应。NOTE:这已经是相当长的时间以来，我对TypeScript/PHP/服务器的工作了，所...
P粉022140576来自于2023-08-07 15:48:34
0 1 169
mysql 死锁问题 TP3.23             $this->startTrans();//启用事务             $tokenInfo = $th
ｖｉｏｎ７７来自于2023-08-08 15:10:00
0 0 18
在使用Stripe Checkout录制100%折扣交易的逐步指南 我正在使用Stripe Checkout PHP API for a website,该网站跳转到Stripe Checkout进行支付。一切都正常，但有一个新的要求从客户端出现了...
P粉764003519来自于2023-08-07 15:29:42
0 1 179
User 'root'@'localhost' 拒绝访问 - 权限不足？ 似乎root用户正在连接到本地计算机上，但是它使用的地图权限似乎是空的。在这平台上没有权限。我正在遇到root用户在多个平台上的问题，而且这个问题已经持续了很长时间。root@12...
P粉826283529来自于2023-08-07 14:35:51
0 2 168
开发Laravel套件：在没有Laravel/框架依赖的情况下安装Illuminate Foundation。 我在当前正在开发的一个Laravel套件的ServiceProvider中，依赖于通过 magic methods 配置文件（my.config）和配置文件路径（../my-con...
P粉463291248来自于2023-08-07 14:53:05
0 1 179
PHP中的逻辑运算符和赋值运算符优先级. 最近我看到了一个有趣的代码片段：$x = 2 && $y = 3; echo (int)$x.':'.(int)$y; 这个代码片段的作用是输出 $x$ 和...
P粉176980522来自于2023-08-07 11:55:52
0 1 141
在WooCommerce WordPress中，ui-datepicker-year只显示20年。 我需要更新function.php文件，以便显示99年而不仅仅是20年。我正在使用Bizberg主题。我尝试了以下代码，但未能给我一个扩展的范围。问
P粉720716934来自于2023-08-06 21:20:13
0 2 264
如何在WordPress网站中更改URL地址呢？ 我有一个WordPress网站，网址是"http://example.com/example/"。我使用WordPress主题和页面来设置网站。但现在我想将这个...
P粉445750942来自于2023-08-06 20:52:36
0 1 192
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部