js滚动条事件监听addEventListener、removeEventListener不生效

 //移除监听需要满足

1. 需要移除的事件类型必须是一样的, 比如: click
2. 需要从目标事件移除的 EventListener 函数必须和 addEventListener 中注册的是同一个, 也就是说引用地址是相同的
3. 指定需要移除的 EventListener 函数的useCapture 和 addEventListener 中注册的相同的

写法1 

//定义一个对象，对象中定义一个handleEvent函数
this.scrollShowButtonHandel = {
            handleEvent: function (e) {
                var pageHeight = $(".main-content").height() - $(window).height() - 100;
                if (pageHeight > 0 && e.target.scrollTop > pageHeight) {
                    $("#btnSave").show();
                }
                else {
                    $("#btnSave").hide();
                }
            }
        }

// 绑定监听事件
window.addEventListener("scroll", this.scrollShowButtonHandel, true);
// 接触绑定
window.removeEventListener("scroll", this.scrollShowButtonHandel, true);

写法2 

//定义一个函数
scrollShowButton: function (e) {
        var pageHeight = $(".main-content").height() - $(window).height() - 100;
        if (pageHeight > 0 && e.target.scrollTop > pageHeight) {
            $("#btnSave").show();
        }
        else {
            $("#btnSave").hide();
        }
    },



window.addEventListener("scroll", this.scrollShowButton, true);
window.removeEventListener("scroll", this.scrollShowButton, true);

//注意：this.scrollShowButton.bind(this)这种写法bind会创建一个新函数，函数的内存地址会变，故会导致移除绑定失败

参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderland

EventTarget.removeEventListener() 取消监听事件不起作用(失效)的原因 | 种子的信仰

EventTarget.removeEventListener - Web API 接口参考 | MDN

EventListener | MDN

Function.prototype.bind() - JavaScript | MDN