Как создать обработчик события click внутри обработчика события mouseover?

Question

Я пытаюсь создать своего рода инспектор элементов (например, в Chrome/FF).

Flow выглядит следующим образом:

1. Вы нажмите кнопку 'Пуск проверки' кнопку.
2. Вы наводите курсор на необходимый элемент.
3. Вы нажимаете на этот элемент.
4. Вы должны увидеть этот элемент в консоли.

JSFiddle example

Вот код:

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); 
     }); 
    }); 
}; 

Проблема заключается в: каждый раз, когда я наведите курсор мыши на какой-то элемент - нажмите обработчик событий прилагается к нему. Итак, , если я навещу над p элемент 5 раз, а затем щелкните по нему - я увижу 5 console.log s вместо 1.

Я пытался реализовать его с помощью 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

Я предлагаю разбить его на части. Пользователь нажимает кнопку «Начать проверку», и ваша страница переходит в режим проверки, где динамически добавляет css каждому элементу, который зависает, поэтому он похож на Chrome. Когда вы нажимаете на элемент в режиме проверки, вы можете обращаться с ним так, как хотите. Таким образом, вам нужно добавить только один наведение и один обработчик кликов для каждого элемента, таким образом, только запуск события один раз.