Layui数据表格的行按钮点击事件和行点击事件冲突（已解决）

前言

特殊情况：

“layui算是我接触前端入门的一个框架了。2021年10月15号听到layui官网关闭了，可能也代表着一个时代的结束。关闭的原因不得而知，据网上说可能是贤心大佬累了。 哎，虽然我是搞后端的，但是还是谢谢贤心大佬之前的辛勤付出！祝他生活幸福，工作顺利！”

layui 贤心大佬写的， 牛的一批.但也还是有问题的，之前有去layui社区问过还@了贤心大佬 还回我了，但现在社区关了…

为什么会遇到这个问题？？？

业务场景如下：

1. 一个带有checkbox多选框的数据表格，点击checkbox行会选中。这是正常情况
2. 为了用户操作方便，点击行也要选中checkbox，这个时候监听行点击事件也能监听到并且行checkbox也能被选中。也是正常情况
3. 行上面有按钮， 点击按钮的时候 按钮也属于行… 会先触发按钮事件，再触发行事件。但我在操作行按钮的时候并不想操作行。这就事件冲突了…

解决方案：

不用layui自带的行监听事件， 只table.on('tool）监听按钮点击事件和checkbox点击事件！点击行勾选checkbox事件我们自己实现

解决方案代码:

要注意的是在事件捕获到按钮时，会事件冒泡到行，所以要阻止冒泡.

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) {
            if (tag == 'DIV') {
                checkbox.click();
            } 
        }
	});
	
	//  阻止行点击事件冒泡
    this.$div.on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();
    });
}

全部代码

<section id="web-page" class="web-box">
	<div class="suspect-dataTab-box">
	    <table id="suspect-dataTab" lay-filter="suspect-tab"></table>
	    <!-- 表格操作 -->
	    <script type="text/html" id="operation-btn">
	        <a class="iconfont icon-xiangqing  layui-btn layui-btn-primary layui-btn-xs" title="详情" lay-event="suspect-details"></a>
	        <a class="iconfont icon-zhanghu  layui-btn layui-btn-primary layui-btn-xs" title="账户" lay-event="suspect-account">&#xe601;</a>
	        <a class="iconfont icon-xiugai  layui-btn layui-btn-primary layui-btn-xs" title="修改" lay-event="suspect-update"></a>
	        <a class="iconfont icon-dianhua  layui-btn layui-btn-primary layui-btn-xs" title="电话" lay-event="suspect-telphone"></a>
	    </script>
	 </div>
 </section>

function  layuiDataTabTest() {
	this.$div = $('#web-page')
	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) {
            if (tag == 'DIV') {
                checkbox.click();
            } 
        }
	});
	
	//  阻止行点击事件冒泡
    this.$div.on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
        e.stopPropagation();
    });
}

// 我这里只模拟，他的按钮监听和行点击事件
layuiDataTabTest.prototype.dataTable = function (suspectInfoUrl， max) {
	layui.use('table', function () {
        var table = layui.table;
        layui.form.render();
        table.render({
            elem: '#test'
            , height: 300
            , url: window.centerUrl + suspectInfoUrl //数据接口
            , skin: 'line'
            , page: true //开启分页 
            , parseData: function (res) {
                let count = 0;
                if (max) {
                    count = max;
                } else {
                    count = res.value.length;
                }
                return {
                    "code": res.error,
                    "msg": res.description,
                    "count": count, // 在这里放查出值得length不行，需要另外写请求查出传进来
                    data: res.value
                }
            }
            , cols: [[
            	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!注意头部这一行一定要加，
            	// 不然你的行点击事件的checkbox是不会选中的
                { checkbox: true, align: 'center', LAY_CHECKED: false }
                , { field: 'id', title: '证件号', width: 260, align: 'center', }
                , {
                    field: 'idType', title: '证件类型', align: 'center'
                    , templet: function (d) {
                        let idTypeText = code_GetEnums(IdType, d.idType);
                        return idTypeText.name;
                    }
                }
                , { title: '操作', width: 200, toolbar: "#operation-btn" }
            ]],
            id: 'suspectDataTabRow',
            text: {
                none: '无数据'
            }, done: function (res, curr, count) {

            }
        });

		/**
		* 我们只监听checkbox的点击事件 不监听row行点击事件,
		* (手写一个行点击事件（点击行我们去拿到checkbox的标签去给checkbox一个点击事件，
		* 这样就可以给用户一个良好的使用体验了，也解决了这个冲突）)
		*/
        table.on('checkbox(suspect-tab)', function (obj) {
              console.log(doSomething);
        });

        // 点击里面的按钮
        table.on('tool(suspect-tab)', function (obj) {
            console.log(doSomething);
        });
    });
}

以上就是我的解决方法了， 也确实解决了行点击和行按钮点击冲突的问题。

发布于2020-01-21 22:42

修改于 2020-12-24 17:46

改了一些重要描述的字体颜色。