关于js阻止冒泡时的一些坑

前提:这两天在用datatable做列表,点击列表行显示详情,就会涉及到阻止冒泡的问题,话不多说直接上代码,大概思路就是先获取到事件,然后阻止它。

//得到事件
function getEvent() {
	if (window.event) {
		return window.event;
	}
	func = getEvent.caller;
	while (func != null) {
		var arg0 = func.arguments[0];
		if (arg0) {
			if ((arg0.constructor == Event
					|| arg0.constructor == MouseEvent || arg0.constructor == KeyboardEvent)
					|| (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
				return arg0;
			}
		}
		func = func.caller;
	}
	return null;
}

//阻止冒泡
function cancelBubble() {
	var e = getEvent();
	if (window.event) {
		e.cancelBubble = true;//阻止冒泡
	} else if (e.preventDefault) {
		e.stopPropagation();//阻止冒泡
	}
	
}

 这里的时候遇到一个坑,因为项目时间比较久了,有很多列表是之前就写好的,新开发的列表添加上阻止冒泡的代码没有问题,之前的列表加上这段代码时,比如点击““催收”这个方法是正常的,而“缴费”、“编辑”、“删除”都会报null异常,通过debug调试发现是getEvent()时无法获取事件对象,原因就是“催收”的方法是onclick方法,可以正常捕捉到事件,而“编辑”、“删除”等方法是默认a标签的href,没有点击事件,所以会导致无法捕捉事件,改成onclick之后就正常了。

关于js阻止冒泡时的一些坑_第1张图片

你可能感兴趣的:(关于js阻止冒泡时的一些坑)