CODEWITHSUNDEEP
jquery
Lil Timmy O'tool
Lil Timmy O'tool

Reputation: 19

How do you say this in jQuery?

I want to alert something if the user's mouse has left TWO html elements (a textfield as well as a span block). How do I say the AND in jquery, in vain I tried something like this:

if ($('textarea.commentField') && $('span.loginPrompt')).mouseout(function() {
     alert('something');
});

Upvotes: 1

Views: 145

Answers (4)

kibibu
kibibu

Reputation: 6184

Building on the other answers, you could try

(function() {
  var inc = 0;
  var both = false;
  $('textarea.commentField, span.loginPrompt')
    .mouseover(function() {
      inc++;
      if(inc==2) { both = true; }
    })
    .mouseout(function() {
      inc--;
      if(inc == 0 && both) {
        both = false; 
        // do whatever else you wanted here
    });
})();

This differs in functionality from the other state-based answer, in that the do whatever bit will be triggered only when the mouse has been inside both the textarea and the span simultaneously. The both var tracks whether, at any time, both elements have had the mouse enter without leaving either.

It's wrapped in a function so the state vars don't pollute the exterior namespace

Upvotes: 1

Hari Pachuveetil
Hari Pachuveetil

Reputation: 10374

This might help:

$('textarea.commentField, span.loginPrompt').mouseout(function() {
     alert('something');
});

Upvotes: 1

Stefan Kendall
Stefan Kendall

Reputation: 67822

You can't do this natively, as this will require some legwork.

Something like this would work, but there must be a better solution:

var state = {a:false,b:false};
$('.a').mouseenter(enterA);
$('.a').mouseout(exitA);
$('.b').mouseenter(enterB);
$('.b').mouseout(exitB);

function enterA(){ state.a = true }
function exitA(){ state.a = false }
function enterB(){ state.b = true }
function exitB(){ state.b = false }

And then if you have jQuery 1.4.2, you can bind multiple events, so add these after the first events.

$('.a,.b').mouseout(function(){ 
//we're outside of both blocks
if( !state.a && !state.b )
{
   //do something
}
});

This will then fire when you've left A or B, and you're also outside of the other one. I think this is what you meant.

Upvotes: 7

Bennor McCarthy
Bennor McCarthy

Reputation: 11675

If the span encloses the textfield, you will only need the handler on the span.

If you want to attach the same handler to two independent elements, use this:

$('textarea.commentField, span.loginPrompt').mouseout(...)

Upvotes: 3

Related Questions