mouseover 이벤트 핸들러 내에서 click 이벤트 핸들러를 만드는 방법은 무엇입니까?

Question

(Chrome/FF에서와 같이) 어떤 종류의 요소 검사기를 만들려고합니다. 다음과 같이

흐름은 다음과 같습니다

1. 당신은 버튼을 클릭 '검사 시작'.
2. 필요한 요소 위에 마우스를 올려 놓습니다.
3. 해당 요소를 클릭하십시오.
4. 콘솔에 해당 요소가 표시되어야합니다. 이벤트 핸들러가 연결되어 클릭 - 나는 어떤 요소 위에 마우스를 올려마다 :
   가

   startInspecting = function(){ 
       $('section *').on('mouseover.INSPECTOR', function(e){ 
        $('.hovered-element').removeClass('hovered-element'); 
        $(e.target).addClass('hovered-element'); 
        $(this).on('click.INSPECTOR', function(e){ 
         $('section *').off('mouseover.INSPECTOR'); 
         $('section *').off('click.INSPECTOR'); 
         $('.hovered-element').removeClass("hovered-element"); 
         console.log(e.target); 
        }); 
       }); 
   }; 
   

   문제는입니다 : 여기

   JSFiddle example

는 코드입니다. 그래서 을 p 요소 위로 5 번 가져간 다음 클릭하면 1 대신 5 console.log이 표시됩니다.

나는 각 요소에 한 번만 공중 선회 할 수 있다는, mouseenter/mouseleave를 사용하여 구현하려고했으나 문제를 직면 - another JSFiddle example

를 그래서 나는 그 상관없이 내가 요소 위에 마우스를 몇 번이나 내 코드를 향상시킬 수 방법 , 그것은 단지 하나의 클릭 핸들러를 가질 것인가?

미리 감사드립니다. 도움을 주시면 감사하겠습니다.

Answer 1

onclick 처리기를 mouseover 외부로 이동하려고 시도 했습니까?

startInspecting = function(){ 
    $('section *').on('mouseover.INSPECTOR', function(e){ 
     $('.hovered-element').removeClass('hovered-element'); 
     $(e.target).addClass('hovered-element');   
    }).on('click.INSPECTOR', function (e) { 
     $('section *').off('mouseover.INSPECTOR click.INSPECTOR'); 
     console.log(e.target); 
    }); 
}; 

DEMO

Answer 2

나는 부분으로 나누는 게 좋을 것. 사용자가 "Start Inspecting"을 클릭하면 페이지가 검사 모드로 들어가서 hss 된 모든 요소에 CSS를 동적으로 추가하여 Chrome과 유사하게 보입니다. 검사 모드에서 요소를 클릭하면 원하는대로 처리 할 수 ​​있습니다. 이렇게하면 요소 당 하나의 호버와 클릭 핸들러 만 추가하면됩니다. 따라서 이벤트를 한 번만 트리거합니다.