vue通过父组件调用子组件里面的方法，子组件的方法通过全局定义的eventLists获取到所有已绑定事件，移除并重新绑定该事件，防止重复绑定

最新推荐文章于 2022-11-30 10:13:38 发布

喜大普奔⁶⁶⁶

最新推荐文章于 2022-11-30 10:13:38 发布

阅读量733

点赞数

分类专栏： js vue 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_38652871/article/details/92583707

版权

js 同时被 2 个专栏收录

52 篇文章 3 订阅

订阅专栏

vue

49 篇文章 0 订阅

订阅专栏

引子：原生JS貌似没有获取元素已绑定事件的方法，查了查实在没找到，只能自个儿写一个了
有人说让用Chrome的window.getEventListeners(elemObj)去获取，可是我的还是报错，实在没辙了，用最笨的办法一劳永逸吧，懒人有懒人的办法，这样不就好多了嘛

重新封装全局绑定事件和移除事件方法

function addEvent(obj, type, callback, useCapture=false) {
    obj.addEventListener(type, callback, useCapture);
    addEventList(obj, type, callback, useCapture);
}

function removeEvent (obj, type, callback, useCapture=false) {
    obj.removeEventListener(type, callback, useCapture);
    removeEventList(obj, type, callback, useCapture);
}

function addEventList(obj, type, callback, useCapture=false) {
    if (obj.eventList) {
        if (obj.eventList[type]) {
            obj.eventList[type].push({ callback: callback, useCapture: useCapture });
        } else {
            obj.eventList[type] = [{ callback: callback, useCapture: useCapture }];
        }
    } else {
        obj.eventList = {};
        obj.eventList[type] = [{ callback: callback, useCapture: useCapture }];
    }
}

function removeEventList(obj, type, callback, useCapture=false) {
    let eventList=obj.eventList;
    if (eventList) {
        if (eventList[type]) {            
            for (let i = 0; i < eventList[type].length; i++) {
                if (eventList[type][i].callback===callback) {
                    eventList[type].splice(i, 1);
                    if (eventList[type].length===0) {
                        delete eventList[type];
                    }
                    break;
                }
            }
        } 
    } 
}

function hasEvent(obj, type, callback, useCapture=false){
	let flag = false;
	if(obj && obj.eventList){
		let eventList = obj.eventList;
        if(eventList[type]){
            for(let i=0;i<eventList[type].length; i++){
                if(eventList[type][i].callback === callback){
                    flag = true;
                }
            }
        }
    }
    return flag;
}
Object.defineProperty(Vue.prototype, 'addEvent', {
    value: addEvent
});
Object.defineProperty(Vue.prototype, 'removeEvent', {
    value: removeEvent
});
Object.defineProperty(Vue.prototype, 'addEventList', {
    value: addEventList
});
Object.defineProperty(Vue.prototype, 'removeEventList', {
    value: removeEventList
});
Object.defineProperty(Vue.prototype, 'hasEvent', {
    value: hasEvent
});

main.js引入

import './plugins/global.ref';

index.vue

<router-view ref="childElem" :outHeight="this.outHeight"></router-view>

this.addEvent(window, "resize", () => {
    if(this.$refs.childElem.move) this.$refs.childElem.move();
});

子组件：

methods:{
	downMoveFlag(e){
		console.log('downMoveFlag');
    },
    upMoveFlag(){
		console.log('upMoveFlag');
    },
    moveLine(e){
    	console.log('moveLine');
    },
    move() {
        let eventList = this.outObj.eventList?this.outObj.eventList:null;
        if(eventList){
            this.removeEvent(this.outObj,"mousedown",this.downMoveFlag,false);
            this.removeEvent(this.outObj,"mousemove", this.moveLine,false);
            this.removeEvent(this.outObj,"mouseup", this.upMoveFlag,false);
        }
        this.addEvent(this.outObj,"mousedown",this.downMoveFlag,false);
        this.addEvent(this.outObj,"mousemove", this.moveLine,false);
        this.addEvent(this.outObj,"mouseup", this.upMoveFlag,false);
    }
}