mousedown mouseenter mouseup firefox，还是通一用webkit吧，细节的坑刚刚填，毕竟现在是webkit一家大拿！

mouse,mouseup,mouseenter,mouseover,click坑呀，浏览器表现居然不一致；

firefox呀

直接上代码吧，自定义个el-table的select，chrome表现正常；

firefox就诡异了，mousedown->mouseup,中间不触发mouseover，mouseenter，并且鼠标移出到其它td上up后，居然只能还是在起始td上；并且必然出发click事件；

真是醉了，这个设计也太扯了！

另外扯个firefox开发者工具的鸡肋堆栈跟踪，只显示几个，根本对分析无意义，为什么不显示完整的呢？chrome的堆栈跟踪就很到位，另外html的事件跟踪也完整的。

事实证明呀，还是要走webkit的，firefox再见吧。

 

 

const tableSelect: DirectiveOptions = {


    componentUpdated: (el, binding, vnode) => {
            let option = binding.value;
            vnode.context?.$nextTick(() => {

                var rowSelector = `.el-table__body-wrapper table.el-table__body tr.el-table__row`;
                let clearSelected = function (option) {
                    el.querySelectorAll(`${rowSelector} td`).forEach(function (td) {
                        td.style.backgroundColor = '';
                        option.td_selected = [];
                    });
                };
                option.td_selected = [];
                let td_mousedown;
                let td_list = el.querySelectorAll(`${rowSelector} td`);
               
                td_list.forEach(function (td) {
                    if (!td.querySelector('input')) {
                        td.onmousedown = (function (ev) {
                            document.body.onselectstart = () => true;
                            clearSelected(option);
                        });
                        td.onmouseup = (function (ev) {
                            td_mousedown = undefined;
                        });
                        return;
                    }
                    td.onmousedown = function(ev){
                     
                        if (ev.button != 0) return;
                        td_mousedown = this;
                        document.body.onselectstart = () => false;
                        clearSelected(option);
                    };
                    td.onmouseover = (function (ev) {
                        console.log('onmouseover',this);
                        if (td_mousedown == undefined) return;
                        clearSelected(option);
                        //选区
                        let range = {
                            p1: {row: td_mousedown.parentNode.rowIndex, col: td_mousedown.cellIndex},
                            p2: {row: this.parentNode.rowIndex, col: this.cellIndex},
                        };
                        if (range.p1.row > range.p2.row || range.p1.col > range.p2.col) {
                            range = {p1: range.p2, p2: range.p1};
                        }
                        option.td_selected = [];
                        let rows = el.querySelectorAll(`${rowSelector}`);

                        for (let i = range.p1.row; i <= range.p2.row; i++) {
                            let row = rows[i];
                            let cols = row.querySelectorAll('td');
                            for (let j = range.p1.col; j <= range.p2.col; j++) {
                                let td = cols[j];
                                td.style.backgroundColor = '#3390ff';
                                option.td_selected.push({td: td, tr: row, row: i, col: j});
                            }
                        }
                    })
                    td.onmouseup = (function (ev) {
                        //console.log(this,td_mousedown)
                        if (ev.button != 0) return;
                        if (td_mousedown && td_mousedown != this) {
                            if (option.fn) {
                                option.fn(option);
                            }
                        }
                        td_mousedown = undefined;
                    });
                });


            });


        }
    }
;
export default tableSelect;