问题场景:

ui给的界面上是在行内做删除,比如有一列叫“操作”的列,里面有个按钮,点击可以删除该列。只做前端删除……
然后出现问题报错:
`cannot read property 'xxx' of undefined`

查找问题:

通过断点发现,这个错是在onClickCell方法时返回的。大致代码是这样的,忽略参数,因为不同的行,不同的项目这里是不一样的
 var row=opts.finder.getRow(xxx,yyy) ;
 //省略若干……
 opts.onClickCell.call(xxx,yyy,row[xxx]); 

错误就是最后一行报的,然而根源在第一行,row没有正常获取到,断点发现,获取到的是undefined,当然取row[xxx]是取不到的,要报错。

那么问题来了,我点了一下按钮,为什么会触发这个函数,查文档发现,这个函数是点击单元格的时候触发的函数。问题显而易见,其实就是点击按钮,事件冒泡到点击单元格方法上。此方法被触发的时候,该行已经被删除,所以row为undefined,从而导致这个问题。

解决问题

解决问题就很简单了吧,阻止事件冒泡即可,按钮onclick上传入event,然后事件中event.stopPropagation()即可解决。

总结一下

网上找了一圈,没看到靠谱的解决方式,什么重载数据啥啥的都试过了,并没有什么卵用。所以伸手党不好啊,还是要自己调试解决问题。

另外,《JavaScript高级程序设计》中关于"DOM事件流",说了三个阶段。事件捕获阶段,处于目标阶段和事件冒泡阶段。一个事件的触发,从DOM顶层即document开始一层一层的寻找触发元素,这就是捕获阶段。

寻找到具体元素之后,就是处于目标阶段,我们的事件绑定的函数运行实际就是这个阶段,然后这一步走完了之后,就会去冒泡,看看父元素,祖父乃至更高层元素会不会有同样的事件触发。需要注意的是,冒泡是在处于目标阶段完成之后才会进行。

回到我们问题上来,就是我们先把行给删除了,然后冒泡到上层的函数才去获取行,当然是拿不到,从而导致错误发生。


隨風飄遠
538 声望6 粉丝