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

末蓝、 2022-05-17 07:11 180阅读 0赞

前提：这两天在用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之后就正常了。

![70][]

[70]: /images/20220517/479c4913d0b7404880aeb00b664d6652.png

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS_js阻止事件冒泡的方法

阻止方法有三种： 1、event.stopPropagation(); document.querySelector("login").addEventList

你的名字/ 2023年01月16日 14:26/ 0 赞/ 227 阅读

相关原生JS阻止冒泡

function stopProp(e){ // 获得event 对象并处理兼容 var ev = e || window.even

r囧r小猫/ 2022年09月25日 11:23/ 0 赞/ 100 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 251 阅读

相关 js jquery阻止冒泡事件

event.stopPropagation(); -- 阻止元素冒泡事件注：嵌套元素一般都存在冒泡事件，会带来某些影响例：<div id="c1" οnclick="

╰+攻爆jí腚メ/ 2022年08月20日 07:27/ 0 赞/ 196 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 270 阅读

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

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

末蓝、/ 2022年05月17日 07:11/ 0 赞/ 181 阅读

相关 js阻止默认行为和阻止冒泡

//阻止默认行为 // JavaScript document.getElementById('btn').addEventListener('clic

叁歲伎倆/ 2022年05月15日 01:05/ 0 赞/ 304 阅读

相关前端js阻止事件冒泡

-------------------- title: 前端js阻止事件冒泡 date: 2018-4-21 20:27:24 tags: \[js\] categor

电玩女神/ 2022年04月12日 09:47/ 0 赞/ 267 阅读

相关 js中阻止事件冒泡

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <html> <head

淩亂°似流年/ 2022年01月14日 06:05/ 0 赞/ 296 阅读

相关 JS 阻止冒泡的方式

//阻止冒泡事件 function stopBubble(e) \{ if (e && e.stopPropagation) \{//非IE e.st

水深无声/ 2021年12月11日 07:07/ 0 赞/ 204 阅读