Layui数据表格的行按钮点击事件和行点击事件冲突解决办法...

遇到问题过程

这个冲突是这样发生的:
用layui的数据表格，点击行里面的按钮就会冲突触发到行事件…导致我的按钮没有按到。我怀疑就是没有用它的layer.open({})方法,（ps：他的layer.open()里面肯定用了阻止事件冒泡）,但是呢，我又不能阻止事件冒泡！

原因是这样：
点击行按钮会去触发数据表格的tool工具监听，但是紧接着会触发 row点击事件，还会去触发 checkbox事件…,然后再会去执行我在tool里面写的其他方法。

尝试解决

当然遇到问题第一时间是layui官网上面看文档，找了，也用了在工具监听最后加上阻止事件冒泡的各种，如： return false, layui.close(obj), layui.stope(obj),都不起作用，都会去继续按照我遇到问题过程中描述的方法继续执行他的过程。。。
后来继续尝试解决:…

解决成功

想了很久，这个问题。终于让我找到解决办法了，下面我来贴伪代码。在讲解思路。最后分享下我遇到的坑和开发需要注意的地方

首先我申明下我用的是js的原型链模式开发的。自己注意哦，其实一样的。

function  layuiDataTabTest() {
	this.$div = $('#webpage')
	// 定义一个全局变量，并给上默认值
	this.stopeNumber = 2; // 作用是用来判断他的值为多少，而判断是点按钮还是点击了行
	this.initEvent();
}

layuiDataTabTest.prototype.initEvent = function () {
	var This = this;
	
	// 这是你在点击layui的数据表格行的时候需要做事件代理，因为数据表格是动态加载进来的，不然这段代码会失效..
	this.$div.on('click', '.layui-table-body table.layui-table tbody tr',function () {
		var obj = event ? event.target : event.srcElement;
        // 获取事件名称
        var tag = obj.tagName;
        // 获取前面的多选框checkbox按钮的标签
        var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-checkbox I"); 
        // 判断这不是个空标签
        if (checkbox.length != 0) {
    
        /* layui的事件名称是固定的，当点击行的时候他的名称就是DIV,  点击按钮的时候就是标签的大写
        *， 由于我数据表格里面用的是<a>标签来装按钮的 所以获得他的大写标签名为 A
        * 这样我们就可以知道她点击的是行还是按钮了。，
        * 我们在给全局属性赋值，到时候就可以去判断了
        */
            if (tag == 'DIV') {
                This.stopeNumber = 2;
                checkbox.click();
            } else if (tag == 'A') {
                This.stopeNumber = 1;
            }
        }
	});
	
	// 阻止多选框事件冒泡， 为什么我们上面不这样做呢，是因为上面的行没有特殊的类名...
	// 其实有很多种做法的，我这只是一种
    this.$div.on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();
    });
}

// 我这里只模拟，他的按钮监听和行点击事件
layuiDataTabTest.prototype.dataTable = function () {
	var This = this;
	layui.use('table', function () {
        var table = layui.table;
        layui.form.render();
		table.on('tool(suspect-tab)', function (obj) {
			// 关键是这行代码， 下面我来说说关键在哪里
			/*
			*  其实看懂我前面的问题描述的就可以看出问题所在了
			* 
			*  当点击按钮的完后 他并不会去执行他的标签的点击事件也就是 initEvent里面的 对应标签点击事件
			*  而是往下走，去执行行点击事件,
			* 
			*  我加上这一行就是他会去点击执行上面方法里的点击事件，就可以了。
			*/
            This.$div.find('.layui-table-body table.layui-table tbody tr td div A').click();
            if (This.stopeNumber == 1) {
					console.log('dosomething...');
              /*  if (obj.event === 'suspect-details') {
                } else if (obj.event === 'suspect-update') {
                } else if (obj.event === 'suspect-account') {
                } else if (obj.event === 'suspect-telphone') {
                }
                */
            }
        });

        // 数据表格行点击事件
        table.on('row(suspect-tab)', function (obj) {
            if (This.stopeNumber == 2) {
                var flag = !obj.tr.find(':checkbox:first').prop('checked');
                obj.tr.find(':checkbox').prop('checked', flag);
                if (flag) {
                    obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked');
                    var checkStatus = table.checkStatus('suspectDataTabRow')
                        , data = checkStatus.data;
                } else {
                    obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');
                }
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            }
        });
    });
}