1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.mousemove()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/events/" title="View all posts in Events">Events</a> > <a href="http://api.jquery.com/category/events/mouse-events/" title="View all posts in Mouse Events">Mouse Events</a></span>
</div>
</div>
<div id="mousemove1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.mousemove( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.</p>
<ul class="signatures">
<li class="signature" id="mousemove-handlereventObject">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.mousemove( handler(eventObject) )</h4>
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
</li>
<li class="signature" id="mousemove-eventData-handlereventObject">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4.3/">1.4.3</a></span>.mousemove( [eventData], handler(eventObject) )</h4>
<p class="arguement"><strong>eventData</strong>A map of data that will be passed to the event handler.</p>
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
</li>
<li class="signature" id="mousemove"><h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.mousemove()</h4></li>
</ul>
<div class="longdesc">
<p>This method is a shortcut for <code>.bind('mousemove', handler)</code> in the first two variations, and <code>.trigger('mousemove')</code> in the third.</p>
<p>The <code>mousemove</code> event is sent to an element when the mouse pointer moves inside the element. Any HTML element can receive this event.</p>
<p>For example, consider the HTML:</p>
<pre><div id="target">
Move here
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div></pre>
<p>The event handler can be bound to the target:</p>
<pre>$("#target").mousemove(function(event) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
$("#log").append("<div>" + msg + "</div>");
});</pre>
<p>Now when the mouse pointer moves within the target button, the messages are appended to <div id="log">:</p>
<p>
<span class="output">Handler for .mousemove() called at (399, 48)</span><br><span class="output">Handler for .mousemove() called at (398, 46)</span><br><span class="output">Handler for .mousemove() called at (397, 44)</span><br><span class="output">Handler for .mousemove() called at (396, 42)</span><br></p>
<p>To trigger the event manually, apply <code>.mousemove()</code> without an argument:</p>
<pre>$("#other").click(function() {
$("#target").mousemove();
});</pre>
<p>After this code executes, clicks on the Trigger button will also append the message:</p>
<p><span class="output">Handler for .mousemove() called at (undefined, undefined)</span></p>
<p>When tracking mouse movement, you usually need to know the actual position of the mouse pointer. The event object that is passed to the handler contains some information about the mouse coordinates. Properties such as <code>.clientX</code>, <code>.offsetX</code>, and <code>.pageX</code> are available, but support for them differs between browsers. Fortunately, jQuery normalizes the <code>.pageX</code> and <code>.pageY</code> properties so that they can be used in all browsers. These properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document, as illustrated in the example output above.</p>
<p>Keep in mind that the <code>mousemove</code> event is triggered whenever the mouse pointer moves, even for a pixel. This means that hundreds of events can be generated over a very small amount of time. If the handler has to do any significant processing, or if multiple handlers for the event exist, this can be a serious performance drain on the browser. It is important, therefore, to optimize <code>mousemove </code>handlers as much as possible, and to unbind them as soon as they are no longer needed.</p>
<p>A common pattern is to bind the <code>mousemove</code> handler from within a <code>mousedown</code> hander, and to unbind it from a corresponding <code>mouseup</code> handler. If implementing this sequence of events, remember that the <code>mouseup</code> event might be sent to a different HTML element than the <code>mousemove</code> event was. To account for this, the <code>mouseup</code> handler should typically be bound to an element high up in the DOM tree, such as <code><body></code>.</p>
</div>
<h3>Example:</h3>
<div class="entry-examples" id="entry-examples"><div id="example-0">
<h4><span class="desc">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.</span></h4>
<pre class="prettyprint"><code class="example demo-code"><!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-1.7rc2.js"></script>
</head>
<body>
<p>
Try scrolling too.
<span>Move the mouse over the div.</span>
<span>&nbsp;</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></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo" rel="300"></div>
</div></div>
</div>
</div>
</div>
</body></html>
|
