将需要人为触发的事件放在定时器或者循环中,程序有可能产生Bug


  将需要人为触发的事件,比如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" οnclick="handleEntryEvent(this)">进入</a>'+
		            '</div>'+
		            '<div class="content">'+
		                '<p id="leftStatus'+activity_id+'" class="p1 font1">'+info+'</p>'+
		                '<a id="'+activity_id+'" class="entry" οnclick="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属性,如
 οnclick="handleEntryEvent(this)",this表示该对象的引用


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值