How To Create Click Event Handler Inside Mouseover Event Handler?

I'm trying to build some kind of element inspector (like in Chrome/FF). Flow is as follows: You click 'Start inspecting' button. You hover over necessary element. You click on tha

Solution 1:

Did you try moving the onclick handler outside the 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

Solution 2:

I'd suggest breaking it up into parts. The user clicks on "Start Inspecting" and your page goes into inspecting mode where it adds css dynamically to every element that is hovered over so it looks similar to Chrome. When you click on an element in inspecting mode then you can handle it how you want. This way you only have to add one hover and one click handler per element, thus only triggering the event once.