Question

I want to add mouse over event on all elements on the page except which has class “no_inspect”,

i want to add this event after loading all page elements, i tried to write it like that:

$('*:not(.no_inspect)').mouseover(MouseOverEvent);

but its not working, seams something missed.

UPDATE Not working means:

The event is attaching to all elements on the page “have no_inspect class or haven’t” which is not the behavior i want.

UPDATE MouseOverEvent Code:

function DIOnMouseOver(evt) {
    element = evt.target;

    // set the border around the element
    element.style.borderWidth = '2px';
    element.style.borderStyle = 'solid';
    element.style.borderColor = '#f00';
}

Answer 1

The mouseover event bubbles. Try mouseenter instead.

Also, why are you applying the styles to evt.target? Why not ‘this’?

function DIOnMouseOver(evt) {
    $(this).css({
        border: '2px solid #f00'
    });
}

As mentioned by Matchu (in the comments), another way to avoid propagation is to call event.stopPropagation() within your event handler.