Since I have attached mouseover and mouseout event to each and every element in HTML, How can I prevent same event on few HTML element?

Question

$('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) {
    if (this === e.target) {
        (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
    }
   });

I have tried .on and .off method also but not able to get desired result.

Answer 1

Simply exclude the undesired elements from your original binding:

$('body').on('mouseover mouseout', '*:not(.undesiredelements)', function (e) {
    if (this === e.target) {
        $(e.target).css('border', (e.type === 'mouseover' ? '1px solid blue' : ''));
    }
});

"Removing a binding for some elements" is equivalent to changing the selector condition for which the handler is fired. If you need to change the binding after you have already used a loose selector like * , you can simply unbind the original handler and rebind to the desired elements.

Note that there is only one event handler binding happening here (ie to the body element)