.mousedown()
.mousedown( handler(eventObject) ) 返回: jQuery
描述: 為 "mousedown" 事件綁定一個(gè)處理函數(shù),或者觸發(fā)元素上的 "mousedown" 事件。
-
version added: 1.0.mousedown( handler(eventObject) )
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
-
version added: 1.4.3.mousedown( [ eventData ], handler(eventObject) )
eventData將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
version added: 1.0.mousedown()
這個(gè)函數(shù)的第一種用法是 .bind('mousedown', handler) 的快捷方式,第二種用法是 .trigger('mousedown') 的快捷方式。
當(dāng)鼠標(biāo)指針在元素上和按下鼠標(biāo)鍵,mousedown事件被發(fā)送到這個(gè)元素。任何HTML元素都可以收到此事件。
舉例來(lái)說(shuō),請(qǐng)看下面的HTML:
<div id="target"> Click here </div> <div id="other"> Trigger the handler </div>

這個(gè)事件可以綁定到任何 <div>元素:
$('#target').mousedown(function() {
alert('Handler for .mousedown() called.');
});
現(xiàn)在,如果我們點(diǎn)擊這個(gè)元素,警報(bào)顯示:
Handler for .mousedown() called.
當(dāng)不同的元素被點(diǎn)擊時(shí)我們也可以觸發(fā)這個(gè)事件:
$('#other').click(function() {
$('#target').mousedown();
});
這些代碼執(zhí)行后,點(diǎn)擊Trigger the handler同樣警報(bào)顯示。
任何鼠標(biāo)按鈕被點(diǎn)擊時(shí)mousedown事件就會(huì)被發(fā)送。作用于特定的按鈕,我們可以使用事件對(duì)象的which屬性。并非所有瀏覽器都支持這個(gè)屬性(IE瀏覽器使用按鈕代替),但是使用jQuery標(biāo)準(zhǔn)化的屬性,它可以安全使用在任何瀏覽器。點(diǎn)擊鼠標(biāo)左鍵which的值是1,點(diǎn)擊鼠標(biāo)中鍵which的值是2,點(diǎn)擊鼠標(biāo)右鍵which的值是。
此事件主要用于確保主要按鈕是用來(lái)開始拖動(dòng)操作;如果忽視,當(dāng)用戶嘗試使用上下文菜單,可能會(huì)出現(xiàn)奇怪的結(jié)果。而中間和右邊按鈕可檢測(cè)到這些屬性,這是不可靠的。在Opera和Safari中,例如,點(diǎn)擊鼠標(biāo)右鍵默認(rèn)情況下不察覺。
如果在用戶點(diǎn)擊一個(gè)元素,并且拖動(dòng)鼠標(biāo)離開這個(gè)元素,并釋放鼠標(biāo)鍵,這仍然是算作mousedown事件。在大多數(shù)的用戶界面,這個(gè)動(dòng)作的順序被視為一個(gè)“取消”的按鍵,所以通常最好使用click事件,除非我們知道mousedown事件針對(duì)一個(gè)特定情況較好。
Example:
當(dāng)MouseUp和MouseDown事件觸發(fā)時(shí),顯示文本時(shí)。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Press mouse and release here.</p>
<script>
$("p").mouseup(function(){
$(this).append('<span style="color:#F00;">Mouse up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00F;">Mouse down.</span>');
});
</script>
</body>
</html>