停止事件传播

    一旦你处理一个事件，无论事件传播到什么程度，你都希望停止事件继续向下传播。因为添加事件监听器的方式不同有以下两种方式停止事件传播。

    由于路由阶段先于返回阶段发生所以路由监听器会先于返回监听器触发。如果路由阶段停止事件传播，那么其后的路由监听器及所有返回监听器都不会触发。手动停止事件对象传播使用 stopPropagation 方法，如下例。

Example 2  : Source View

<hbox id="outerbox">
  <button id="okbutton" label="OK"/>
</hbox>

<script>
function buttonPressed(event){
  alert('Button was pressed!');
}

function boxPressed(event){
  alert('Box was pressed!');
  event.stopPropagation();
}

var button = document.getElementById("okbutton");
button.addEventListener('command',buttonPressed,true);

var outerbox = document.getElementById("outerbox");
outerbox.addEventListener('command',boxPressed,true);
</script>

    这里分别在按钮和box上添加事件监听器，在调用box的监听器中使用了 stopPropagation 方法，因此按钮的监听器永远不会被调用。如果去掉此命令两个监听器的显示都会出现。

阻止默认响应

    如果没有注册事件处理，那么当完成路由及返回后，元素会以一种默认的方式对事件作出响应。这种默认响应依赖于元素的定义。比如， 'popupshowing' 事件在快捷菜单显示之前被发送。默认的响应就是显示快捷菜单。如果默认的响应被阻止，那么快捷菜单就不会显示。默认的响应可以使用事件对象的 preventDefault 方法阻止，如下例。

Example 3  : Source View

<button label="Types" type="menu">
  <menupopup onpopupshowing="event.preventDefault();">
    <menuitem label="Glass"/>
    <menuitem label="Plastic"/>
  </menupopup>
</button>

     另一种方式， 对于以属性形式使用的可以在代码中直接返回 false 。 注意阻止默认响应不同于 stopPropagation 方法，即使默认响应被阻止，事件依然会传播下去。同样的，定义 stopPropagation 方法也不会阻止默认响应。如果需要，必须同时调用。

    注意一旦传播或默认调用被阻止，都不可恢复。

    下面的几章列出可能用到的一些事件，一个完整的列表在这里 XULPlanet event reference。

鼠标键事件属性

    当一个鼠标键事件产生，一系列附件属性也随之产生用以描述哪个鼠标键被按下及鼠标指针的位置。事件的 button 可以用于确定哪个按键被按下。0 代表左键，1 代表中键 ，2代表右键。如果鼠标设置不同，值也不同。

    detail 保存着鼠标键被短时间内快速点击的次数。这允许你检查这是一次单击，双击还是三击。当然如果你希望检查双击你可以使用 dblclick 事件代替。一旦第一次点击开始 click 事件就会触发，第二次点击会再触发一次，第三次又一次。但 dblclick 事件仅在双击发生时触发。

     button 及 detail 仅支持与鼠标键相关的事件，对鼠标移动事件无效。对于鼠标移动事件这两个值均为0。

鼠标位置事件属性

    所以的鼠标事件都提供事件发生时鼠标的坐标位置。有两个坐标系统。其一是 screenX 、 screenY 属性他们是基于屏幕左上角的。另一个是 clientX 、 clientY 他们是相对于文件左上角的。这里有一个显示当前鼠标位置的例子。

Example 4  : Source View

<script>

function updateMouseCoordinates(e){
  var text = "X:" + e.clientX + " Y:" + e.clientY;
  document.getElementById("xy").value = text;
}
</script>

<label id="xy"/>
<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/>

    在这个例子里，box 的尺寸被准确设定，这样更容易看出结果。事件处理器得到 clientX 和 clientY 属性并根据他们创建一个字符串。这个字符串又被设置成为 label.value 的值。注意事件对象必须作为参数传递给updateMouseCoordinates 函数。如果快速的在剥削的边缘上移动鼠标，你可能会发现坐标并不会准确的停到 400。这是因为 mousemove 事件触发的间隔取决于鼠标移动的速度。因为当鼠标移动过一段距离后新的事件才触发，因为发送鼠标每一像素的移动是十分没有效率的。

元素相关坐标

    你经常想知道事件发生时对元素的坐标而非对于这个窗口。这时你可以使用减法来计算，示例如下。

var element = event.target;
var elementX = event.clientX - element.boxObject.x;
var elementY = event.clientY - element.boxObject.y;

      XUL 元素有一个 box 对象可以通过 boxObject 属性获得。在后一章我们会学习更多相关内容，但记住它保存着如何显示元素包括元素的x，y 位置。在这个例子中，这些坐标被从事件坐标中减去，这样就得到了事件相对于元素的坐标。