原生dom元素获取标签类进行操作

38 阅读1分钟

1.使用事件委托方式寻找dom元素

function eventDelegation (element, eventType, selector, func) {
    element.addEventListener(eventType, function(e) {
        let el = e.target;
        while (!el.matches(selector)) {
            if (el === element) {
                el = null;
                break;
            }
            el = el.parentNode;
        }
        el && func.call(el, el, e);
    });
    return element;
}

2.定义方法 点击事件


// 绑定原生DOM点击事件
bindRowClickEvents() {
    const tableEl = document.getElementById('SecR1');//最外层dom
    // rowTableClass 元素上的类名
    eventDelegation(tableEl,"click",".rowTableClass",(element,e)=>{
        console.log(e);
        // 阻止事件冒泡(避免与el-table原生事件冲突)
        e.stopPropagation();

        // 获取行数据
        const rowIndex = [...element.parentNode.children].indexOf(element);
        const rowData = this.listData[rowIndex];
        // console.log('原生DOM获取的行数据:', rowData);

    });
},