javascript - How to create click event handler inside mouseover event handler? -

i'm trying build kind of element inspector (like in chrome/ff).

flow follows:

1. you click 'start inspecting' button.
2. you hover on necessary element.
3. you click on element.
4. you should see element in console.

jsfiddle example

here code:

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

the problem is: each time hover on element - click event handler attached it. if hover on p element 5 times, , click on - see 5 console.logs instead of 1.

i tried implement using mouseenter/mouseleave, faced issue, each element can hovered once - another jsfiddle example

so how can improve code no matter how many times hover on element, have 1 click handler?

thanks in advance, appreciated!

did try moving onclick handler outside 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