Как удалить функцию, добавленную в элемент clicked, когда я нажимаю на нее?

Question

У меня есть функция, которая добавляет горизонтальную прокрутку колесика мыши к выбранному div.

Я хочу добавить эту функцию к элементу, когда я нажимаю на него, и удаляю его, когда я нажимаю его. Не уверен, как это сделать, хотя добавление функциональности работает нормально, но я не могу понять, как удалить эту функцию, если я выхожу за пределы div (так что даже если мышь находится внутри div, горизонтальная прокрутка не будет выполнена).

Вот мой JQuery:

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

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

}); 

Функция отзывчивым для горизонтальной прокрутки (MouseWheel плагин):

$.fn.horizontal = function() { 

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

}; 

Другими словами, то, что я пытаюсь достичь: если пользователь нажмет на $mainDiv - добавьте horizontal() в функцию $scrollableContainer, но если пользователь затем выберет $mainDiv, удалите horizontal() функцию от $scrollableContainer. Я попытался щелкнуть по телу, но это не помогло:

$('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 не должно использоваться? Используете ли вы другой плагин для обеспечения нестандартных функций?

Есть однако deltaX и deltaY свойства события в Chrome и IE, они могут быть доступны как этот

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

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

И MDN имеет polyfill, который должен работать кросс-браузер.