查阅完整版请访问博客
 http://cgbluesky.blog.163.com/
 
鼠标位置
当您捕获一个鼠标事件，可能想知道鼠标指针当前的位置。关于“在哪里”的问题前面已经回答过，就是对象之上，更具体的问题是“在哪个位置？”。这一点可以转而关注事件处理方法的第二个参数eventArgs。它提供了这些信息，并支持getPosition()方法。
getPosition()方法支持任意的XML元素做为参数。如果设置了它，getPosition()方法将得到鼠标相对于给定元素的坐标。否则，将得到一个绝对坐标（例如，您没有提供参数或参数是一个null值）。
getPosition()方法的返回值是一个带有两个属性x和y的对象，它代表了鼠标指针水平和垂直位置。在Web中，原点表示的是左上角的位置。
例5-7所包含的XAML标记跟踪了鼠标的移动。注意<TextBlock>属性是如何用于显示鼠标指针位置的。另外还需注意主canvas的Loaded事件所执行的方法是canvasLoaded()。
例5-7 显示鼠标位置，XAML文件（MousePosition.xaml）
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="canvasLoaded">
  <Rectangle Width="200" Height="75" Stroke="Orange" StrokeThickness="15" />
  <TextBlock FontFamily="Arial" FontSize="28" Canvas.Left="25" Canvas.Top="25"
             Foreground="Black"
             Text="X: ??  Y: ??" x:Name="MousePosition" />
</Canvas>
JavaScript代码的任务是当鼠标移动时确定并输出当前鼠标指针的位置。相关的事件名称是MouseMove，想象中事件侦听的代码应该如下：
function canvasLoaded(sender, eventArgs) {
    sender.addEventListener(
        'MouseMove',
        //事件侦听的引用或代码);
}
现在所需做的事只是写事件侦听，这里我们将使用匿名方法。它使用getPosition()方法确定鼠标位置并写入文本框中。例5-8是完整的JavaScript代码，图5-4可以看到它在浏览器中的效果。
例5-8 显示鼠标位置，XAML JavaScript文件（MousePosition.xaml.js）
function canvasLoaded(sender, eventArgs) {
    sender.addEventListener('MouseMove',
        function(sender, eventArgs) {
            var x = eventArgs.getPosition(null).x;
            var y = eventArgs.getPosition(null).y;
            sender.findName('MousePosition').text=
                'X: '+ x + ' Y: ' + y;
        }
     );
}

图5-4 显示当前鼠标位置
前面曾经提到过，您可以移除事件侦听。为此您可以在绑定了事件侦听的对象上调用removeEventListener()方法。第一个参数还是事件，但第二个参数可能会让您感到吃惊，它是事件侦听的引用（因为您可以在一个事件上绑定多个事件侦听）。您可以通过在调用addEventListener()方法时保存其返回值来得到这个引用。
为了示范这种机制，我们再次使用鼠标移动，但这一次在单击文本时显示。我们开始于前面的例5-7中的XAML标记，但文件名改为MousePositionToggle.xaml。JavaScript代码也做了很多改变。首先定义两个全局变量。一个用于存放被绑定的事件处理，另一个是一个布尔值，用于用于通知脚本当前是否跟踪鼠标位置。
var traceMouse = false;
var handler = null;
把事件处理赋给canvas的Loaded事件的代码也做了一些改变：使用了一个新的方法名，叫toggle()：
function canvasLoaded(sender, eventArgs) {
    sender.addEventListener('MouseLeftButtonDown', toggle)
}
toggle()方法首先需要检查是否要跟踪鼠标指标位置坐标。如果不，跟踪必须被允许（因为我们希望绑定这种行为），我们使用跟前面相同的代码：不管鼠标指针是否移动，新的坐标都会显示。注意，addEventListener()方法的返回值是如何存储于handler这个全局变量中的：
function toggle(sender, enentArgs) {
    if(!traceMouse) {
        handler = sender.addEventListener('MouseMove',
            function(sender, eventArgs) {
                var x = eventArgs.getPosition(null).x;
                var y = eventArgs.getPosition(null).y;
                sender.findName('MousePosition').text=
                    'X: ' + x + '  Y: ' + y;
            }
        );
    }
}
如果鼠标之前已经被跟踪（traceMouse等于true），必须让它无效，也就是说事件侦听必须被解除。removeEventListener()方法实现这个功能。记住，您不得不使用addEventListener()方法的返回值做为第二个参数！
} else {
        sender.removeEventListener('MouseMove', handler);
}
不要忘记改变traceMode（译者注：应该为traceMouse）变量：从true变为false，或从false变为true：
traceMouse = !traceMouse;
例5-9包含了XAML JavaScript文件的完整代码。如果您在浏览器中执行它，需要单击文本来开始查看鼠标坐标。再次单击文本来停止。
例5-9 添加或移除事件侦听，XAML JavaScript代码（MousePositionToggle.xaml.js）
var traceMouse = false;
var handler = null;
 
function canvasLoaded(sender, eventArgs) {
    sender.addEventListener('MouseLeftButtonDown', toggle)
}
 
function toggle(sender, enentArgs) {
    if(!traceMouse) {
        handler = sender.addEventListener('MouseMove',
            function(sender, eventArgs) {
                var x = eventArgs.getPosition(null).x;
                var y = eventArgs.getPosition(null).y;
                sender.findName('MousePosition').text=
                    'X: ' + x + '  Y: ' + y;
            }
        );
    } else {
        sender.removeEventListener('MouseMove', handler);
    }
    traceMouse = !traceMouse;
}