當我點擊外部元素時，如何刪除添加到單擊元素的功能？

Question

我有一個funcition，將鼠標滾輪水平滾動到選定的div。

我想在單擊它時將此函數添加到元素，並在單擊它之外時將其刪除。不知道如何做，雖然添加功能工作正常，但我不知道如何刪除此功能，如果我點擊外部的div（所以即使鼠標在div內，水平滾動不會發生）。

這裏是我的jQuery：

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

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

}); 

功能響應的水平滾動（鼠標滾輪插件）：

$.fn.horizontal = function() { 

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

}; 

換句話說，我想要實現的是：如果用戶點擊$mainDiv - 將horizontal()功能添加到$scrollableContainer，但如果用戶點擊$mainDiv外部，請從$scrollableContainer刪除horizontal()功能。我確實嘗試點擊身體，但沒有工作：

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

任何人都可以幫忙嗎？

Answer 1

首先修改插件

$.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作爲第二個參數，並且所述mousewheel事件是非標準的，並且根據MDN不應使用？你是否使用另一個插件來提供非標準功能？

但是也有在Chrome和IE事件的deltaX和deltaY性質，他們可以這樣

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

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

而且MDN訪問具有填充工具，應該工作的跨瀏覽器。