jQuery is mousedown on mouseover

Question

I have a table where i want to change cell background on mouse over and mouse button down, my current solution doesn't work as I want it to :

function ChangeColor(sender) {

    sender.style.backgroundColor = 'yellow';

}

var clicking = false;


$(document).mouseup(function() {
    clicking = false;
});


$(document).ready(function() {
    $('#Table1 tr').each(function() {
        $('td', this).each(function() {
            $(this).mousedown(function() {
                clicking = true;
            });
            $(this).mousedown(function(event) {
                if (clicking==true) { ChangeColor(this); }
            });
        });
    });
});

Is there any way to make it work like that ?

isnt mouse over and down on an element the same as click or am i missing something? — Pharabus, Feb 28 '10 at 02:00
I don't rely understand what you're trying to say , mouseover!=click / mousedown=click — Jacob, Feb 28 '10 at 02:04
it is the combination i am confused about, if you mousedown whilst the mouse is over an element it fires the click event or are you after some kind of drag select? — Pharabus, Feb 28 '10 at 02:33
yes , you can say I am trying to achieve some kind of drag select, like using paint tool pen while coloring pixels - does that make any sens ? — Jacob, Feb 28 '10 at 09:05
I've edited my answer. I think it is what you're looking for. — user113716, Feb 28 '10 at 12:23

user113716 · Accepted Answer · 2010-02-28T12:18:26.120

EDIT: Given your comment above, you could do something like this:

$(document).ready(function() {
    isMouseDown = false

    $('body').mousedown(function() {
        isMouseDown = true;
    })
    .mouseup(function() {
        isMouseDown = false;
    });

    $('Table1 tr td').mouseenter(function() {
        if(isMouseDown)
            $(this).css({backgroundColor:'orange'});
    });
});

This will color the background of the td when you mouseover, but only if the mouse button is down.

Sounds like you just want to change the color when you click. If that's the case, it is much simpler than what you're attempting.

$(document).ready() {

    $('#Table1 tr td').click(function() {
        $(this).css({backgroundColor:'yellow'});
    });

});

This will change the background of the td elements yellow when you click them.

It will be similar to change the color when you mouseover.

EDIT: Just noticed the title of your question.

If you want to trigger a click when you hover...

$(document).ready() {

    $('#Table1 tr td').click(function() {
        $(this).css({backgroundColor:'yellow'});
    })
     .mouseenter(function() {
         $(this).click();
     });

});

...of course, you could eliminate the click in that case and just change the background with the mouseenter event.

that's freakin' genius patrick ! It does exactly what I would expect it to do. I've only added 'mousedown' for td to color single cell on single click as well. Thank you ! — Jacob, Feb 28 '10 at 12:38

jQuery is mousedown on mouseover

1 Answers1

Linked