2012-12-31 4 views
2

이벤트를 관리하는 방법을 찾고 있습니다. 요소 A의 호버 기능이 있고 요소 B의 클릭 기능이 있습니다. B의 두 번째 클릭 동안 A의 호버 기능을 일시적으로 사용하지 않으려합니다.다른 요소의 이벤트 저장 및 비활성화 방법 임시

구멍을 다시 쓸 필요가없는 방법을 찾고 있습니다. "B와 내부의 A 함수의 기능"매우 간단하게 "저장 및 이벤트 비활성화, 호출 저장 함수"

.data ('events') 및 console.log와 같은 기술을 발견했습니다. 피곤했지만 실패했거나 잘못 쓴 것일 수 있습니다.

도와주세요!

$(A).hover(); 

$(b).click( 

    if($.hasData($(A)[0])){ // if A has event, 
      //STORE all the event A has, and disable 
    }else{ 
      //ENABLE the stored event for A 
    } 
); 
+0

JavaScript에서 DOM 노드의 이벤트 처리기를 반복 처리 할 수 ​​없다는 점에 유감스럽게 생각합니다. 어쩌면 노드에 추가 할 이벤트를 추적하는 배열을 유지한다면이 작업을 수행 할 수 있습니다. 이게 너가 찾고있는거야? – Josep

+0

답장을 보내 주셔서 감사합니다. 그래서 .data ('events')는 이벤트 저장 기능에 관한 것이 아닙니다. – Till

+0

이 질문의 새로운 요구 사항을 고려하여 새로운 답변을 추가했습니다. – Josep

답변

1

내가 싶은 것은이 같은 (example for JQuery 1.7.2)이라고 생각 :

$("#a").hover(function(){alert("test")}); 
$("#a")[0].active=true; 

$("#b").click(function(){ 
    if($("#a")[0].active){ 
     $("#a")[0].storedEvents = []; 
     var hoverEvents = $("#a").data("events").mouseover; 
     jQuery.each(hoverEvents , function(key,handlerObj) { 
      $("#a")[0].storedEvents.push(handlerObj.handler); 
     }); 
     $("#a").off('hover'); 
    }else{ 
     for(var i=0;i<$("#a")[0].storedEvents.length;i++){ 
      $("#a").hover($("#a")[0].storedEvents[i]); 
     } 
    } 
    $("#a")[0].active = ($("#a")[0].active)==false; 
});​ 

JSFiddle Example

그러나 몇가 고려해야 할 사항 :

  • JQuery가 추가 된 이벤트 핸들러의 내부 트랙을 유지하므로 JQuery와 함께 이벤트를 추가하는 경우에만 작동합니다.
  • 각 버전의 JQuery는 data("events")을 다르게 처리합니다. 즉,이 코드는 다른 버전의 JQuery에서 작동하지 않을 수 있습니다.

이 정보가 도움이되기를 바랍니다.

EDIT :

data("events") JQuery와 1.6 1.7 JQUERY 있지만 it has been removed in JQuery 1.8에서 사용하는 내부 데이터 구조 문서화 하였다. 따라서 JQuery 1.8에서 이벤트 데이터에 액세스하는 유일한 방법은 $._data(element, "events")입니다. 그러나 JQuery 설명서의 조언을 염두에 두십시오. 이것은 지원되는 공용 인터페이스가 아닙니다. 실제 데이터 구조가 버전과 버전이 호환되지 않게 변경 될 수 있습니다..

+0

대단히 감사합니다 !!!이게 내가 찾고있는 것 같아 – Till

+0

이 문제를 개선하는 데 도움을주십시오. http://stackoverflow.com/questions/14098673/store-and-restore-event-handler – Till

+0

완료, 방금 게시 한 답변을 확인하십시오. ;) – Josep

1

당신은 기능 a와 b의 범위 밖에있는 변수를 가지고 시도하고 기능 A에 기능 B에서 수행 할 작업을 실행하는 데 그 변수를 사용할 수 있습니다.

var state; 
var a = function() { 
    if(!state) { 
     state = true; 
     // Add hover action and other prep. I'd create a third function to handle this. 
    console.log(state); 
}; 
var b = function() { 
    if(state) { 
     state = false; 
     // Do unbinding of hover code with third function. 
    } else { 
     state = true; 
     // Do whatever else you needed to do 
    } 
} 

당신이 뭘하려는 건지에 대한 자세한 내용을 모른 채, 나는이 비슷한을 시도 할 것입니다.

+0

대단히 감사합니다!, 코드를 업데이트했습니다. 도와주세요. 내가 가지고있는 A 함수가 완전히 분리되어 있기 때문에 A 안에있는 코드를 변경하고 싶지 않습니다. 다른 해결책이 있습니까? – Till

2

var hoverme = function() { 
    alert('Hover Event Fired'); 
}; 

$('.A').hover(hoverme); 

var i = 0; 

$('.B').on('click', function(){ 
    if(i%2 === 0){ 
     // Unbind event 
     $('.A').off('hover'); 
    } 
    else{ 
     // Else bind the event 
     $('.A').hover(hoverme); 
    } 
    i++; 
}); 

Check Fiddle

+0

대단히 고맙습니다. 제 질문을 업데이트했습니다. 실제로 뭔가 기능을 다시 설치할 필요가 없습니다. 기억을 부르는 것처럼 가능합니까? – Till

1

그것을 할라도 유용 더 나은 방법이있다 시도하지만,이 문서에 준비가 잘 작동이 수행

$("#a")[0].active=false; 

$("#b").click(function(){ 
    $("#a")[0].active = ($("#a")[0].active)==false; 
    if($("#a")[0].active){ 
     $("#a").hover(function(){alert("test")}); 
    }else{ 
     $("#a").off('hover'); 
    } 
}); 

JSFiddle example

+0

대단히 고맙습니다. 제 질문을 업데이트했습니다. 실제로 뭔가 기능을 다시 설치할 필요가 없습니다. 저장된 메모리를 호출하는 것처럼 가능합니까? – Till

+0

불행히도 JavaScript에서 DOM 노드의 이벤트 핸들러를 반복 처리 할 수 ​​없다는 점에 유의하십시오. 어쩌면 노드에 추가 할 이벤트를 추적하는 배열을 유지한다면이 목표를 달성 할 수 있습니다. 원하는 것이 무엇입니까? – Josep

+0

답장을 보내 주셔서 감사합니다. 그래서 .data ('events')는 이벤트 저장 기능에 관한 것이 아닙니다. – Till

1

B를 클릭하면 A에 대한 클릭 호버 이벤트를 비활성화하려는 것처럼 들립니다.

$("body").on("hover", "#a", function(){ 
    alert("hovering"); 
}); 

$("#b").click(function(){ 
    $("body").off("hover", "#a", function() { 
     alert("removed hovering"); 
    }); 
}); 

jQuery 끄기 메서드를 사용할 수 있습니다.이 바이올린을보십시오. http://jsfiddle.net/nKLwK/1/

+0

대단히 고맙습니다. 제 질문을 업데이트했습니다. 실제로 뭔가 기능을 다시 설치할 필요가 없습니다. 기억을 부르는 것처럼 가능합니까? – Till

1

이와 같이, 마우스를 다시 기능을 정의한 요소 및 B 요소의 두 번째 클릭에 ("마우스 오버") 결합 해제 전화 B의 클릭으로하며,이 요소에 마우스를 할당하는 함수를 정의

function aHover(eventObject) { 
    // Todo when the mouse enter object. You can use $(this) here 
} 

function aHoverOut(eventObject) { 
    // Todo when the mouse leave the object. You can use $(this) here 
} 

$(A).hover(aHover, aHoverOut); 
// ... 
$(b).click(function(eventObject) { 
    if($.hasData($(A)[0])){ // if A has event, 
     $(A).unbind('mouseenter mouseleave'); // This is because not a event hover, jQuery convert the element.hover(hoverIn, hoverOut) in element.bind('mouseenter', hoverIn) and element.bind('mouseleave', hoverOut) 
    }else{ 
     $(A).hover(aHover, aHoverOut); 
    } 
}); 
+0

대단히 고맙습니다. 제 질문을 업데이트했습니다. 실제로 뭔가 기능을 다시 설치할 필요가 없습니다. 저장된 메모리를 호출하는 것처럼 가능합니까? – Till

1

jQuery의 .off 함수를 사용하여 "a"요소의 가리 키기를 해제 할 수 있습니다.

function hoverA() { 
    alert('I\'m on hover'); 
} 

$('#a').hover(hoverA); 

var active = true; 

$('#b').on('click', function(){ 
    if(active){ 
     $('#a').off('hover'); 
     active = false; 
    } else{ 
     $('#a').hover(hoverA); 
     active = true; 
    } 
}); 

라이브 데모를 사용할 여기에 : http://codepen.io/joe/pen/wblpC

+0

대단히 고맙습니다. 제 질문을 업데이트했습니다. 실제로 뭔가 기능을 다시 설치할 필요가 없습니다. 저장된 메모리를 호출하는 것처럼 가능합니까? – Till