2010-03-17 8 views
6

Allgemeine Javascript-Frage hier, die auch gut wäre zu wissen, wie (wenn möglich) in jquery zu tun.Ist es möglich, ein Klickereignis bei Hover auszulösen?

Können Sie ein Klickereignis auslösen, wenn Sie den Mauszeiger über ein Objekt bewegen?

Ich weiß, es wird Leute fragen, warum, aber bitte nur Humor.

Vielen Dank, C

+0

Wenn Sie wissen, werden die Leute fragen, über die Erklärung? – Quentin

Antwort

11

Werfen Sie einen Blick auf die trigger Funktion:

$(someElement).trigger('click'); 
+0

Ausgezeichnet. Hat ein kleines schreiben hier für jeden Interessierten ... http: //blog.clintonbeattie.com/monitor-howed-items-in-google-analytics/ –

4

Verwenden Sie einfach click()

$(selector).click(); 

Oder alternativ nur Ihre click() Code ausrücken in eine gemeinsame Funktion und rufen Sie das von hover().

4

Ganz einfach:

$(selector).mouseenter(function() { $(this).click() }); 
0
$('#selector').bind('mouseover',function(){ 

/*DO WHAT YOU WANT HERE*/ 


}); 

, die den Trick tun sollten

0

jQuery auslösen können 'Klick' alle Objekt außer Tag ein

wollen wir versuchen, diesen Code auf der Konsole und sehen Was passiert auf dieser Seite?

$('a').bind('mouseover', function(){ 
    $(this).trigger('click'); 
    console.log('hover'); // let me know when it hovering <a> 
}); 
2

EDIT: viel später als der Post, aber nur um zu veranschaulichen, wie Sie den Handler hinzufügen und es auslösen.

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).on('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}).trigger('click'); 

Sie brauchen es nur einmal?

$('myselector').on('click',function(){ 
    // handle click event, put money in my bank account 
}).one('mouseenter',function(){ 
    $(this).trigger('click'); // only on enter here once 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseenter',function(){ 
    // handle hover mouse enter of hover event, put money in my bank account 
}).on('mouseleave',function(){ 
    // handle mouse leave event of hover, put money in my bank account 
}); 
0

Es ist möglich, ein Klickereignis bei Hover auszulösen.

Versuchen Sie das folgende Beispiel:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>hover + (mouseup/mousedown, click) demo</title> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<p class="up">Press mouse and release here.</p> 
<p class="hover1">Press mouse and release here. HOVER+UP/DOWN</p> 
<p class="hover2">Press mouse and release here. HOVER.UP/DOWN</p> 
<p class="hover3">Press mouse and release here. HOVER.CLICK</p> 

<script> 
$("p.up") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover1") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }) 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover2") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover2") 
    .mouseup(function() { 
    $(this).append("<span style='color:#f00;'>Mouse up.</span>"); 
    }) 
    .mousedown(function() { 
    $(this).append("<span style='color:#00f;'>Mouse down.</span>"); 
    }); 
$("p.hover3") 
    .hover(
    function() { 
     $(this).append("<span style='color:#f00;'>Hover IN.</span>"); 
    }, 
    function() { 
     $(this).append("<span style='color:#00f;'>Homer OUT.</span>"); 
    }); 
$("p.hover3") 
    .click(function() { 
    $(this).append("<span style='color:#00f;'>CLICK.</span>"); 
    }); 
</script> 

</body> 
</html> 
0

Vielleicht möchten Sie auch eine Verzögerung auf schweben hinzufügen, so dass es nicht sofort auslösen. Die Verzögerung ist nützlich, wenn Sie sie in einer Liste von Miniaturansichten verwenden möchten.

var hoverTimer; 
var hoverDelay = 200; 

$('.classSelector').hover(function() { 
    var $target = $(this); 
    // on mouse in, start a timeout 
    hoverTimer = setTimeout(function() {   
     // do your stuff here 
     $target.trigger('click');   
    }, hoverDelay); 
}, function() { 
    // on mouse out, cancel the timer 
    clearTimeout(hoverTimer); 

}); 
Verwandte Themen