.mousemove()
.mousemove( handler(eventObject) ) 返回： jQuery
描述： 為 "mousemove" 事件綁定一個(gè)處理函數(shù)，或者觸發(fā)元素上的 "mousemove" 事件。
-
version added: 1.0.mousemove( handler(eventObject) )
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
-
version added: 1.4.3.mousemove( [ eventData ], handler(eventObject) )
eventData將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射。
handler(eventObject)每次事件觸發(fā)時(shí)會(huì)執(zhí)行的函數(shù)。
version added: 1.0.mousemove()
這個(gè)函數(shù)的第一種用法是 .bind('mouseleave', handler) 的快捷方式，第二種用法是 .trigger('mouseleave') 的快捷方式。
當(dāng)鼠標(biāo)指針在元素內(nèi)移動(dòng)時(shí)，mousemove事件就會(huì)被發(fā)送到這個(gè)元素，任何HTML元素都可以接受此事件。
舉例來說，請(qǐng)看下面的HTML：
<div id="target"> Move here </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
這個(gè)事件可以綁定到目標(biāo)元素:
$('#target').mousemove(function(event) {
var msg = 'Handler for .mousemove() called at ' + event.pageX + ', ' + event.pageY;
$('#log').append('<div> + msg + '</div>');
});
現(xiàn)在當(dāng)鼠標(biāo)指針在目標(biāo)元素中移動(dòng)時(shí)，以下信息將被添加到<div id="log">：
Handler for .mousemove() called at (399, 48)
Handler for .mousemove() called at (398, 46)
Handler for .mousemove() called at (397, 44)
Handler for .mousemove() called at (396, 42)
當(dāng)不同的元素被點(diǎn)擊時(shí)我們也可以觸發(fā)這個(gè)事件：
$('#other').click(function() {
$('#target').mousemove();
});
這些代碼執(zhí)行后，點(diǎn)擊Trigger the handler同樣添加這些信息：
Handler for .mousemove() called at (undefined, undefined)
當(dāng)足跡鼠標(biāo)移動(dòng)，我們通常需要知道實(shí)際的鼠標(biāo)指針的位置。事件對(duì)象傳遞給處理器包含了一些有關(guān)鼠標(biāo)的坐標(biāo)。比如.clientX, .offsetX, 和 .pageX屬性是有效的，但對(duì)他們的支持不同瀏覽器。幸運(yùn)的是，jQuery的規(guī)范了.pageX和.pageY屬性，以便他們能夠在所有瀏覽器上使用。這些屬性提供了鼠標(biāo)指針位置相對(duì)于頁面的左上角的X和Y坐標(biāo)，例如上面例子的輸出。
我們必須記住， mousemove事件是當(dāng)鼠標(biāo)指針移動(dòng)時(shí)觸發(fā)的，即使是一個(gè)像素。這意味著數(shù)百個(gè)事件在短時(shí)間內(nèi)產(chǎn)生。如果處理器做任何重大的處理，或者如果該事件存在多個(gè)處理函數(shù)，這可能造成瀏覽器的嚴(yán)重的性能問題。因此，優(yōu)化mousemove處理程序盡可能，這一點(diǎn)很重要，和當(dāng)他們不再需要時(shí)盡快解除綁定。
一個(gè)常見的模式是在mousedown處理器內(nèi)部綁定mousemove處理器，并在一個(gè)相應(yīng)mouseup處理器取消綁定它。如果實(shí)施這一系列事件，記得mouseup事件可能會(huì)被發(fā)送到不同的HTML元素比mousemove事件?？紤]到這一點(diǎn)，在mouseup處理程序通常應(yīng)綁定到一個(gè)在DOM樹層級(jí)高的元素上，比如<body>。
Example:
Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window, which in this case is the iframe.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:220px; height:170px; margin;10px; margin-right:50px;
background:yellow; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>
Try scrolling too.
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
</script>
</body>
</html>