前段时间在项目开发过程中,遇到了一个JS多播事件的问题,第一次处理这类问题感觉还是挺棘手的,现在把这个问题记录下来,以备将来不时之需。
1、首先,我在页面上画了这么一个表格,用于数据的展现:
![](https://img-my.csdn.net/uploads/201208/19/1345373753_7689.jpg)
页面代码如下:
★需要加以说明的是,在项目需求中,表格的行记录是通过JS动态追加上去的。也就是说,表格可以根据用户需求动态添加行记录。这里我就不贴出使用JS动态追加表格行标签TR代码,原因是JS动态追加的页面代码跟上面贴出的代码结构类似。
2、然后,利用JQuery为表格每行注册鼠标单击选择事件,用以对行记录进行操作
JQuery事件注册代码如下:
![](https://img-my.csdn.net/uploads/201208/19/1345373808_4244.jpg)
使用上面代码注册的鼠标单击选择事件,导致了一个行记录选择失灵的问题:
(1)单击第三条记录,事件正常触发
![](https://img-my.csdn.net/uploads/201208/19/1345373511_1054.jpg)
(2)单击第二条记录,第二条记录和第三条记录同时被选中
![](https://img-my.csdn.net/uploads/201208/19/1345373555_9999.jpg)
(3)单击第一条记录,第一、二、三条记录同时被选中
![](https://img-my.csdn.net/uploads/201208/19/1345373576_3531.jpg)
(4)单击第二条记录时,第二、三条记录会被选中
![](https://img-my.csdn.net/uploads/201208/19/1345373628_4430.jpg)
再单击第二条记录的时候,第二、三条记录会被取消选中,而第一条记录却会被选中
![](https://img-my.csdn.net/uploads/201208/19/1345373658_2005.jpg)
由此可见,鼠标无论单击表格中任意一行,都会触发每一行的事件处理函数。
3、我开始考量JQuery事件注册中可能会导致问题出现的原因。让我感觉嫌疑最大的就是,页面表格在动态追加行记录的同时,都要对表格所有行执行JQuery注册单击事件,或许表格行记录的鼠标单击事件重复注册正是问题的根源。
(1)JQuery的多播事件委托机制
例子:
$("#testDiv").bind("click", function(event){
alert("one");
});
$("#testDiv").bind("click", function(){
alert("two");
});
单击testDiv对象时,依次提示"one"和"two"。
JQuery添加多播事件委托,也就是为click事件又添加了一个方法,而且新添加方法不会覆盖对象的click事件原有的事件处理函数。
(2)多播事件的抑制:stopImmediatePropagation()取消执行其他的事件处理函数并取消事件冒泡
如果同一个事件绑定了多个事件处理函数,在其中一个事件处理函数中调用stopImmediatePropagation()方法后将不会继续调用其他的事件处理函数
例子:
$("p")click(function(event){
//event handler code
event.stopImmediatePropagation();
});
$("p").click(function(event){
//This event handler function won't be executed
});
(3)多播事件处理在表格行记录注册事件的应用
for(var index in app.idLocs) {
var checkboxID = app.idLocs[index];
var queryListTD = $("tbody#queryList").find("td."+checkboxID);
$.each(queryListTD, function(i, n){
$(queryListTD[i]).click(function(event){
clickTr(checkboxID);
event.stopImmediatePropagation();
});
});
}
问题记录到这里,我们已经基本解决了上面提到的问题。以上就是我在项目开发过程中解决问题的一点小收获,和大家一起分享了,希望大家给点批评指正意见。