SOURCE

class wrapMouse {
    constructor(identity) {
        this.dom = document.querySelector(identity);
        if (this.dom === null) {
            throw (`找不到:identity:${identity}`);
        }
        this.mouse = {
            x: 0,
            y: 0
        }
        this.attrs = {
            offsetLeft: this.dom.offsetLeft,
            offsetTop: this.dom.offsetTop
        }
        return {
            addEventListener: this.addEventListener.bind(this),
        }
    }
    addEventListener(){
       
        const eventName= arguments[0];
        const callback=arguments[1];
        const bubble=arguments[2]||false;
        this._wrap({
            eventName,
            callback,
            bubble
        })
        console.log(`init event ${eventName}`);
    }
    _wrap(options){
        const {eventName,callback,bubble}=options;
        this.dom.addEventListener(eventName,(e)=>{
            this._setMousePositon(e);
            callback(this.mouse,e)
        },bubble)
    }
    _setMousePositon(e) {
        const { pageX, pageY } = e;
        this.mouse.x = pageX - this.attrs.offsetLeft;
        this.mouse.y = pageY - this.attrs.offsetTop;
    }
}

window.onload = function () {
    console.log();
    canvasMouse = new wrapMouse("#myCanvas");
    canvasMouse.addEventListener('mouseover',function(mouse,e){
        console.log('mouseover',mouse);
    });
    canvasMouse.addEventListener('click',function(mouse,e){
        console.log('click',JSON.stringify(e));
    });
    canvasMouse.addEventListener('dblclick',function(mouse){
        console.log('dblclick',JSON.stringify(mouse));
    });
    canvasMouse.addEventListener('mouseout',function(mouse){
        console.log('mouseout',JSON.stringify(mouse));
    });
    canvasMouse.addEventListener('mousemove',function(mouse){
        console.log('mousemove',JSON.stringify(mouse));
    });
    canvasMouse.addEventListener('mousewheel',function(mouse){
        console.log('mousemove',JSON.stringify(mouse));
    });
}

<canvas width="300" height="300" style="margin-left:100px; background-color:#eeeeee;" id="myCanvas"></canvas>