Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.06.2013, 19:19
Профессор
Отправить личное сообщение для Dimaz Посмотреть профиль Найти все сообщения от Dimaz
 
Регистрация: 25.12.2009
Сообщений: 222

Как временно отключить обработчик событий?
Всем привет! Как решить такую задачу? При клике на параграф нужно отключить обработчик событий, чтобы элементы зафиксировались в текущем положении.
Допустим навели курсор на второй параграф. Теперь его свойство margin-left равно 10 пикселям(ушел немного вправо). Кликаем по нему мышкой и он должен зафиксироваться в этом положении. Остальные параграфы должны также, "заморозиться" и не реагировать на события мышки. http://jsfiddle.net/jy6TK/
$('p').on("mouseenter mouseleave click",function(event){
    var elem = $(this), evt = {
        mouseenter:function(){
            $(elem).css("margin-left","10px");
        }, mouseleave:function(){
            $(elem).css("margin-left",0);
        }, click:function(){
            $('p').not(elem).css("color","green");
            alert("Как отключить обрабочик?");
        }
    }
    evt[event.type]();
});
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2013, 20:56
Аватар для BaVa
Аспирант
Отправить личное сообщение для BaVa Посмотреть профиль Найти все сообщения от BaVa
 
Регистрация: 16.11.2011
Сообщений: 60

в jQuery есть метод .unbind(). unbind - отвязать (событие). если передадим имя события, или несколько, то отключаются указанные события. вот я чуть переделал, а дальше я думаю Вы сами поймете, а если не поймете то обращайтесь я расскажу подробней как оно работает
$('p').on("mouseenter mouseleave click",function(event){
    var elem = $(this), evt = {
        mouseenter:function(){
            $(elem).css("margin-left","10px");
        }, mouseleave:function(){
            $(elem).css("margin-left",0);
        }, click:function(){
            $('p').not(elem).css("color","green");
            $('p').unbind(); // отключает все события у всех элементов p
        }
    }
    evt[event.type]();
});

Последний раз редактировалось BaVa, 03.06.2013 в 21:06.
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2013, 21:12
Аватар для BaVa
Аспирант
Отправить личное сообщение для BaVa Посмотреть профиль Найти все сообщения от BaVa
 
Регистрация: 16.11.2011
Сообщений: 60

также есть метод .off()
в документации jQuery написано, что первые версии bind и unbind появились с jQuery 1.0. А с 1.7 появились on и off.
Пишут что предпочтительнее использовать on & off.

Цитата:
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.
Цитата:
http://api.jquery.com/bind/

Последний раз редактировалось BaVa, 03.06.2013 в 21:17.
Ответить с цитированием
  #4 (permalink)  
Старый 03.06.2013, 21:39
Профессор
Отправить личное сообщение для Dimaz Посмотреть профиль Найти все сообщения от Dimaz
 
Регистрация: 25.12.2009
Сообщений: 222

Спасибо. Уже сам разобрался) Прочитал как раз про метод off(). А обработчик поместил в функцию, чтобы в дальнейшем его можно было восстановить.
До этого я ставил атрибут 'data' на div в котором находятся параграфы. И во всех трех событиях ставил проверку, определен ли этот атрибут. Если определен, то return. Только при большом количестве открытых вкладок в браузере, подтормаживала анимация при наведении из-за постоянной проверки.
Ответить с цитированием
  #5 (permalink)  
Старый 03.06.2013, 22:01
Аватар для BaVa
Аспирант
Отправить личное сообщение для BaVa Посмотреть профиль Найти все сообщения от BaVa
 
Регистрация: 16.11.2011
Сообщений: 60

Цитата:
А обработчик поместил в функцию, чтобы в дальнейшем его можно было восстановить.
не очень понял, покажите) интересно
Ответить с цитированием
  #6 (permalink)  
Старый 03.06.2013, 22:14
Профессор
Отправить личное сообщение для Dimaz Посмотреть профиль Найти все сообщения от Dimaz
 
Регистрация: 25.12.2009
Сообщений: 222

function handler(){
$('p').on("mouseenter mouseleave click",function(event){
    var elem = $(this), evt = {
        mouseenter:function(){
            $(elem).css("margin-left","10px");
        }, mouseleave:function(){
            $(elem).css("margin-left",0);
        }, click:function(){
            $('p').not(elem).css("color","green");
            alert("Как отключить обрабочик?");
        }
    }
    evt[event.type]();
});
}
handler()

Поместил обработчик в функцию handler. Чтобы восстановить удаленный обработчик, просто вызываем эту функцию там где нам нужно.
$('button').click(function(){
handler(); //восстановили удаленный обработчик
});
Ответить с цитированием
  #7 (permalink)  
Старый 03.06.2013, 22:17
Аватар для BaVa
Аспирант
Отправить личное сообщение для BaVa Посмотреть профиль Найти все сообщения от BaVa
 
Регистрация: 16.11.2011
Сообщений: 60

понял
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как повесить обработчик daima Общие вопросы Javascript 3 08.11.2012 13:39
Как заставить выполняться обработчик после всех имеющихся обработчиков данного элемен Анатолий Саратовцев jQuery 2 08.10.2012 18:49
Как временно запретить вызов функции? Dazar Общие вопросы Javascript 9 02.09.2012 22:52
Как скрыть обработчик HTML-формы с помошью JavaScript? Мишаня Общие вопросы Javascript 5 15.06.2009 05:40
Обработчик события: как делает jquery? Shasoft jQuery 35 22.04.2009 09:41