JQ事件,如何解绑带参数的句柄函数?

Question

使用场景:
元素在同一个事件上绑定了两个不同的动作,如何在后续的操作中,只解绑其中一个动作?

附上代码:

let el = $('.box');
const
    mx = (e) => {
        console.log(`event.pageX : ${e.pageX}`);
    }, my = (e) => {
        console.log(`event.pageY : ${e.pageY}`);
    };

el.on({
    'click': () => {
        console.log(`element has remove handle 'mx'`);
        //移除mx句柄
    },
    'mouseenter': (e) => {
        mx(e);
        my(e);
    }
});

描述:如代码所示,元素"el"在"mouseenter"事件上绑定了两个动作,分别打印事件的pageX,pageY.

如何在点击元素后,解绑打印pageX的"mx"句柄,而不影响"my"句柄?

求各路大神指点.

Answer 1

let el = $('.xiaoyi-header');
const
    mx = (e) => {
       if(!el.mxRemoved)
            console.log(`event.pageX : ${e.pageX}`);
    }, my = (e) => {
        console.log(`event.pageY : ${e.pageY}`);
    };

el.on({
    'click': () => {
        console.log(`element has remove handle 'mx'`);
        el.mxRemoved = 1;
    },
    'mouseenter': (e) => {
        mx(e);
        my(e);
    }
});

这么算不算？

Answer 2

我觉得是不是应该这样写：

let el = $('.box');
const
    mx = (e) => {
        console.log(`event.pageX : ${e.pageX}`);
    }, my = (e) => {
        console.log(`event.pageY : ${e.pageY}`);
    };

el.on({
    'click': () => {
        console.log(`element has remove handle 'mx'`);
        //移除mx句柄
    },
    'mouseenter.mx': mx, // 试试用命名空间
    'mouseenter.my': my
    }
});
el.off('.mx'); // 按命名空间解绑

Answer 3

mx、my都写在同一个函数里了，不能单独移除。
解决方法：
1、移除'mouseenter'事件，再绑定'mouseenter'：(e) => { my(e)}
2、

el.on({
    'click': () => {
        console.log(`element has remove handle 'mx'`);
        //移除mx句柄
        $(this).attr("removeMx",true)
    },
    'mouseenter': (e) => {
        if(!!$(this).attr("removeMx")){
            mx(e);
        }
        my(e);
    }
});

Answer 4

一般的思路都是定义个变量来做开关控制mx函数的执行就可以

let el = $('.box'),
    mx_delete = 1;
const
    mx = (e) => {
        if(!mx_delete){
            return false;
        }
        console.log(`event.pageX : ${e.pageX}`);
    }, my = (e) => {
        console.log(`event.pageY : ${e.pageY}`);
    };

el.on({
    'click': () => {
        mx_delete = 0;
        console.log(`element has remove handle 'mx'`);
        //移除mx句柄
    },
    'mouseenter': (e) => {
        mx(e);
        my(e);
    }
});