Javascript 当我在元素外部单击时，如何删除添加到已单击元素的函数？

我有一个功能，可以将鼠标滚轮水平滚动添加到选定的分区

我想在单击元素时将此函数添加到元素中，并在单击元素外部时将其删除。虽然我不知道该怎么做，但是添加功能可以很好地工作，但是如果我在div外单击，我不知道如何删除该功能（因此即使鼠标在div内，也不会发生水平滚动）

以下是我的jquery：

$mainDiv.on('click', function() {

    $(this).find($scrollableContainer).horizontal();

});

水平滚动功能响应（鼠标滚轮插件）：

换句话说，我试图实现的是：如果用户单击

$mainDiv

-将

水平（）

函数添加到

$scrollableContainer

，但如果用户然后单击

$mainDiv

外部，则从

$scrollableContainer

中删除

水平（）

函数。我试过点击身体，但没有成功：

$('body').on('click', function() {
    $(this).find($scrollableContainer).off();
});

---

任何人都可以帮忙吗？

首先修改插件

$.fn.horizontal = function(didgeridoo) {  

    this[didgeridoo]('mousewheel', fn);

    function fn(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    }

};

然后激活

$mainDiv.on('click', function() {

    $(this).find($scrollableContainer).horizontal('on');

});

去激活

$(document).on('click', function() {
    $(this).find($scrollableContainer).horizontal('off');
});

在

find

中使用变量相当奇怪，除非该变量将选择器作为字符串保存

请注意，没有

delta

作为第二个参数，并且

mouseweel

事件是非标准的，因此不应使用？您是否使用其他插件来提供非标准功能

然而，Chrome和IE中有事件的

deltaX

和

deltaY

属性，它们可以这样访问

function fn(e) {
    e.preventDefault();

    var delta = e.originalEvent.deltaX;
    this.scrollLeft -= (delta * 40);
}

---

并且有一个可以跨浏览器工作的polyfill。

语法是什么意思

这个[on]

？@thomas-

on

只是一个传入的参数，所以实际上它变成了

这个['on']

或者

这个['off']

，这取决于传递给函数的是什么，而且由于括号表示法与点表示法相同，它与

此.on

或

此.off

相同。谢谢。选择方括号而不是点语法有什么特别的原因吗？

$.fn.horizontal=function（on）…

写为

$.fn.horizontal=function（switch）…

会更好吗？它看起来可以打开或关闭。我选择了方括号来传递一个变量，是的，

开关可能是一个更好的变量名称，除了它是一个保留关键字，所以它必须是类似于
交换
等的名称。
function fn(e) {
    e.preventDefault();

    var delta = e.originalEvent.deltaX;
    this.scrollLeft -= (delta * 40);
}