Как временно отключить обработчик событий?
Всем привет! Как решить такую задачу? При клике на параграф нужно отключить обработчик событий, чтобы элементы зафиксировались в текущем положении.
Допустим навели курсор на второй параграф. Теперь его свойство 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]();
});
|
в 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]();
});
|
также есть метод .off()
в документации jQuery написано, что первые версии bind и unbind появились с jQuery 1.0. А с 1.7 появились on и off. Пишут что предпочтительнее использовать on & off. Цитата:
Цитата:
|
Спасибо. Уже сам разобрался) Прочитал как раз про метод off(). А обработчик поместил в функцию, чтобы в дальнейшем его можно было восстановить.
До этого я ставил атрибут 'data' на div в котором находятся параграфы. И во всех трех событиях ставил проверку, определен ли этот атрибут. Если определен, то return. Только при большом количестве открытых вкладок в браузере, подтормаживала анимация при наведении из-за постоянной проверки. |
Цитата:
|
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(); //восстановили удаленный обработчик
});
|
понял
|
| Часовой пояс GMT +3, время: 15:51. |