将需要人为触发的事件放在定时器或者循环中,程序有可能产生Bug
来源:互联网 发布:淘宝网的域名怎么设置 编辑:程序博客网 时间:2024/05/22 10:54
将需要人为触发的事件,比如click(),mouseleave()等事件放在定时器或者循环中,程序有可能产生Bug。
比如点击事件需要人为操作,与他并行语句不需要人为操作。那么当程序执行到点击事件的时候,因为人为没有去点击,所以该事 件没有触发。此时程序就会跳过点击事件,接着执行下面的代码。
如果说在一个循环里面,想在每一次循环中,获取元素的Id,然后通过这个id来触发对象的点击事件,那么此时写出来的代码很可能会有bug。因为本意是想在每次循环中获取对象的Id,从而实现该对象的点击事件。但是问题是,等到最后面,触发点击事件的时候,获取到的id很有可能是最后一次循环对象的id。
因此我们在循环中,在遍历的对象中添加点击事件,在引用到对象的id或者其他属性的时候要格外小心,以免产生Bug
例如这段代码:
$(function(){
$("div").click(function(){
$(this).css("background-color","red");
console.log("3");
});
$(document).click(function(){
console.log("1");
$("div").css("background-color","white");
});
$("div").click(function(event){
console.log("2");
event.stopPropagation();
});
console.log("0");
});
在控制台输出结果:0。表明当没有触发点击事件时候,程序会接着往下走。
也就是当程序走到点击事件的时候,要是没有发送点击事件,程序会避开点击事件,接着往下执行代码,所以才会出现结果为: 0
// 动态添加内容for (var i = 0; i < len; i++) {var data = datas[i];var title = data.title;var status = data.status;var create_time = data.create_time;var activity_id = data.id;var info = "";var activity_status = "";// activity_id_array.push(activity_id); // console.log(activity_id_array);if (status == "0") {info = "未开始";activity_status = "未开始";}else if( status == "1"){info = "正在进行";activity_status = "结束";}else if( status == "2"){info = "已结束";activity_status = "已结束";}var li_str = '<li class="panel_content" id="activity'+activity_id+'">'+ '<input type="hidden" value="'+activity_id+'" name="activity_id" />'+ '<div class="content">'+ '<p class="p1"><strong >'+title+'</strong></p>'+ '<a id="entry'+activity_id+'" class="entry" onclick="handleEntryEvent(this)">进入</a>'+ '</div>'+ '<div class="content">'+ '<p id="leftStatus'+activity_id+'" class="p1 font1">'+info+'</p>'+ '<a id="'+activity_id+'" class="entry" onclick="handleEndedActivity(this)">'+activity_status+'</a>'+ '</div>'+ '<div class="content content1">'+ '<p class="p1 font2 ">'+create_time+'</p>'+ '<a class="entry" href="#" style="display:none">'+ '</div>'+ '</li>';$("#ul_panel_content").append(li_str);// 点击“进入”$("#entry"+activity_id).css("cursor","pointer");//如果活动处于“未开始”或者“已结束”,则列表中右边的activity_atatus处于不能点击的状态var activityStatus = $("#"+activity_id);if( status == "0" || status == "2" ){activityStatus.attr("disabled",true);activityStatus.css("pointer-events","none"); //pointer-events=none,使onclick无效activityStatus.css("color","gray");}// 活动处于“正在进行”状态,则响应点击“activity_satus=结束”if(status == "1"){ activityStatus.css({"cursor":"pointer","color":"red"}); activityStatus.click(function(){ var activ_id = activityStatus.parent().parent().children("input[name=activity_id]").val();var url = globalConfig.pre_url + "/wxwall_api/activity/handle_activity.php"; var data = {"user_id" : user_id,"activity_id":activ_id, "status" : "2" }; request(url,data,function(response){alert(response.msg); activityStatus.val("已结束");$("#leftStatus"+activ_id).val("已结束"); console.log($("#leftStatus"+activ_id).val());activityStatus.css("color","gray");activityStatus.attr("disabled",true);console.log("complete");}); });}}这段代码的本意是:动态给页面添加内容。即通过后台返回的数据,用lenght函数确定返回活动个数,然后通过for循环添加每一个活动的内容,并且,对内容中一些按键进行相应的处理。原本思路是:在每次循环中,通过后台返回的数据得到每一个活动id。然后在循环里面定义点击事件:点击时页面跳转,并在跳转地址加上活动id。问题:最后面调试的时候,发现:活动的id并不是每一个活动的实际id,而是最后一个活动的id。
该问题说明了,在循环中,当点击事件用到每一个元素的某个属性的时候,程序很有可能产生Bug解决方法:直接用js语法来实现功能,也就是在元素上定义onclick属性,如
onclick="handleEntryEvent(this)",this表示该对象的引用
- 将需要人为触发的事件放在定时器或者循环中,程序有可能产生Bug
- 关于事件触发多次产生的BUG问题
- 在System.timers.timer中给定时器触发的Elapsed事件传递参数
- 在System.timers.timer中给定时器触发的Elapsed事件传递参数
- 在System.timers.timer中给定时器触发的Elapsed事件传递参数
- 在多重循环中,应当将最长的循环放在最内层,最短的循环放在最外层
- 学习笔记之C++为什么将函数声明或者类的定义放在.h文件中,而将其实现放在原文件中
- 将所需要的小图标放在一图片中,用像素定位图片
- 在控件的创建中触发事件
- 怎么在循环中精简代码——将循环测试和更新循环放在一起~
- 在对象图中检测到循环。这将产生无限深的 XML
- Zepto tap事件中需要触发两次的问题
- 在delphi中建立程序的快捷方式--并将快捷方式放在开始->程序->的启动组中
- 在delphi中建立程序的快捷方式--并将快捷方式放在开始->程序->的启动组中
- 定时器解决IE9中propertychange和input事件在拖拽、剪切、删除时无法触发
- 定时器触发事件流程
- DevExpress的NavBarControl组件中NavBarGroup如何触发展开或者折叠事件(点击事件)?
- js的onmousedown事件放在<body>标签下与firefox浏览器所产生的问题
- JDBC高级编程和DAO
- spring学习之---深入理解容器中的Bean
- LCT例题·BZOJ2049洞穴勘测、BZOJ3669魔法森林
- Lexicographically Maximum Subsequence CodeForces
- 1055. The World's Richest (25)
- 将需要人为触发的事件放在定时器或者循环中,程序有可能产生Bug
- POI操作Excel
- 【玩转Eclipse】——eclipse实现代码块自定义折叠---[类似于VS中的#region……#endregion]
- 《剑指offer》笔记-第4章(2)
- 多维动态规划 (共六题)
- BZOJ4216【Pig】
- Android实现照相机拍照
- Java中的堆和栈
- 侧边悬浮框