Question

I’m looking the best way approuch to capture mouse events in HTML s. When you have compound divs, with texts, images and other s, so what I do is put a layer over everything to catch the mouse.

This may lead to further problems since this layer can avoid you to catch other parts of your composition, obligating you to extend this methodology.

I’m clearly influenced by my past as flash programmer when you had to do the same using Sprite.graphics.

I usually do like this:

<div class="photo-element">
   <div class="photo-element-image"><img src="..."/></div>
   <div class="photo-element-title">Some Title</div>
   <div class="photo-element-mouse-wrapper"></div>
</div>

Styling like this:

.photo-element-mouse-wrapper
{
    width:70px;
    height:70px;    
}

.photo-element-title
{
    position:absolute;
    top: 5px;
    ...
}

.photo-element-image
{
    position:absolute;
    top: 0px;
    ...
}

.photo-element
{
    width:70px;
    height:70px;
    position:relative;
}

Finally jQuery would be:

$('.photo-element-mouse-wrapper').mouseover(function() {
    //code
});

My question is:

Is this the best way to catch mouse events?

Answer 1

This works but you should go to jquery’s site. Here are two examples for “photo-element-mouse-wrapper”.

For hover event (mouseenter and mouseleave)

$('.photo-element-mouse-wrapper').hover(function(e){
    //write code for to take action when mouse enters the element
},
function(e){
    //write code for to take action when mouse leaves the element
});

For click event

$('.photo-element-mouse-wrapper').click(function(e){
    e.stopPropagation(); // prevents event bubling
    //write code for to take action when mouse clicks the element
})

There are also other mouse events available like mouseover, mousedown e.t.c. You can find a lot more examples at jquery’s site and that is the better place to learn jquery.