CODEWITHSUNDEEP
javascriptjqueryhtml
Glen Robson
Glen Robson

Reputation: 938

Call an event within another event JQuery

Ok so i have a grid of divs as shown below:

<div class="check1"></div>
<div class="check1"></div><div style="clear:both;"></div>
<div class="check1"></div>
<div class="check1"></div>

In my jquery i check if one of the div's have been clicked using:

$('.check1').mousedown(function(){
    $(this).css('background-color','blue');
});

What i would like to do is if a div is cliced and held down but the cursor moves over another div i would also like that div to change color. I tried this example but the mouseover event is called regardless if the mouse down event has been called.

$('.check1').mousedown(function(){
    $(this).css('background-color','blue');

    $('.check1').mouseover(function(){
        $(this).css('background-color', 'blue');
    });
});

Is this possible and if so what am I doing wrong / what do i need to change?

Upvotes: 1

Views: 113

Answers (4)

painotpi
painotpi

Reputation: 6996

You could use a simple flag concept

Code:

var flag = 0;
$('.check1').mousedown(function () {
    $(this).css('background-color', 'blue');
    flag = 1;
}).mouseup(function () {
    flag = 0;
}).mouseover(function () {
    if (flag) {
        $(this).css('background-color', 'blue');
    }
});

Test Link

Upvotes: 5

claustrofob
claustrofob

Reputation: 4994

The shortest way:)

$('.check1').on('mouseover mousedown', function(e){
    if (e.which == 1){
        $(this).css('background-color', 'blue');
    }
});

http://jsfiddle.net/bLARP/

Upvotes: 2

Jamiec
Jamiec

Reputation: 136239

You have simply forgotten to unbind the mouseover event.

$('.check1').mousedown(function(){

    $(this).css('background-color', 'blue')

    $('.check1').on('mouseover',function(){
        $(this).css('background-color', 'blue')
    });

    $(document).mouseup(function(){
        $('.check1').off('mouseover');
    });
});

Live example: http://jsfiddle.net/vREzg/

Upvotes: 0

Nicolas-Verley
Nicolas-Verley

Reputation: 88

Try this : 

$('.check1').mousedown(function(){
    $(this).css({'background-color','blue'});

    $(this).bind('mouseover', function(){
        $(this).css({'background-color':'blue'});
    }).bind('mouseout', function(){
        $(this).css({'background-color':'green'});
    });
});

Upvotes: 0

Related Questions