DHTML对象模型（About the DHTML Object Model）(三)

来源： 作者：unkonwn 时间：2005-04-07 点击：

禁止事件：

所有的事件都将向它们的父级元素冒泡，而且除非冒泡过程中事件被禁止了，否则事件将会被递归地沿着层次结构的路径最后上浮到文档对象（document object）。要禁止一个事件，你必须在事件句柄中把window.event.cancelBubble属性的值设为“true”。注意一点，除非事件被禁止了，否则，在沿着层次结构冒泡的过程中，它将会被所有注册了这个事件句柄的父级元素处理，即使它已经在子级元素中被处理过了。数据挖掘研究院

禁止事件冒泡与禁止事件的默认行为是不同的。一些事件（例如：一个锚点上的onclick）具有默认行为。当一个锚点被单击时，它默认的行为是把当前窗口导航到其src属性所指定的URL。在事件句柄中返回“false”，或者设置window.event.returnValue属性为“false”，可以禁止事件的默认行为，但不能禁止事件的向上冒泡。要禁止向上冒泡，只有把window.event.returnValue属性设为“true”，相对应地，禁止事件冒泡的设置也并会禁止事件的默认行为。数据挖掘研究院

最后一个例子是演示如何利用事件冒泡将一个共同的效果应用到一组元素上的。若你想把其中一个元素排除在这个效果之外，只要简单地把下面这行代码，从：数据挖掘研究院

<SPAN class=Item>Ham</SPAN> 数据挖掘研究院

修改为：数据挖掘研究院

<SPAN class=Item onmouseover="window.event.cancelBubble = true;" 数据挖掘研究院

    onmouseout="window.event.cancelBubble = true;">Ham</SPAN> 数据挖掘研究院

就可以了。

数据挖掘研究院

（例子的超级链接：数据挖掘实验室

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_03.htm ）数据挖掘实验室

进一步的思考：

在有些情况下，你可以让一个onmouseover事件只注册在一个对象上，考虑下面情况：

数据挖掘研究院

<DIV id=MyDiv> 数据挖掘研究院

<IMG id=MyImg> 数据挖掘研究院

</DIV> 数据挖掘实验室

假如你在img对象上移动鼠标指针，事件将会以下面的顺序激发：数据挖掘研究院

MyDiv:: onmouseover

数据挖掘研究院

MyDiv:: onmouseout

数据挖掘研究院

MyImg:: onmouseover 数据挖掘研究院

把你的鼠标指针从img对象上移开将会再次激发MyDiv::onmouseover事件。

数据挖掘实验室

有些时候，网页制作者可能会想去探测鼠标指针何时移出一个div对象以实现某种

数据挖掘研究院

特别效果。这时，仅仅简单地设置onmouseout事件就并不足够了。为了使这种情况更容易解决，IE4.0标准为onmouseover和onmouseout事件增加了指示源对象（formElement）和目标对象(toElement)的属性，你可以综合使用这些属性和容器的方法来辨别鼠标指针何时移出了一个区域。

数据挖掘实验室

下面的例子演示了如何使用这些属性和方法：数据挖掘研究院

（例子的超级链接：数据挖掘研究院

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_04.htm）数据挖掘研究院

<HTML> 数据挖掘研究院

<BODY id=Body> 数据挖掘研究院

<DIV id=OuterDiv style="width: 100px; height: 50px; background: red"  数据挖掘研究院

    onmouseover="over();" onmouseout="out();"> 数据挖掘研究院

<IMG id=Img1> 数据挖掘研究院

<IMG id=Img2> 数据挖掘实验室

<IMG id=Img3> 数据挖掘实验室

</DIV> 数据挖掘研究院

<SCRIPT> 数据挖掘实验室

function over() { 数据挖掘研究院

    var s; 数据挖掘实验室

    s = "onmouseover: "+window.event.srcElement.id+" from: "+ 数据挖掘研究院

  数据挖掘研究院

window.event.fromElement.id+" to: "+window.event.toElement.id; 数据挖掘研究院

    alert(s); 数据挖掘研究院

} 数据挖掘实验室

  数据挖掘研究院

function out() { 数据挖掘实验室

    var s; 数据挖掘研究院

    s = "onmouseout: "+window.event.srcElement.id+" from: "+ 数据挖掘研究院

  数据挖掘实验室

window.event.fromElement.id+" to: "+window.event.toElement.id; 数据挖掘实验室

    alert(s); 数据挖掘研究院

  数据挖掘研究院

if (!(OuterDiv.contains(window.event.toElement)))  数据挖掘研究院

/*onmouseout事件并非由于鼠标指针从OuterDiv对象移进与其内部接壤的img对象而激发的，即：鼠标指针是真正的离开了整个OuterDiv包含的区域（译者注）*/ 数据挖掘研究院

{ 数据挖掘研究院

        alert("Out Now"); 数据挖掘研究院

    } 数据挖掘研究院

} 数据挖掘研究院

</SCRIPT> 数据挖掘研究院

数据挖掘研究院

</BODY> 数据挖掘研究院

数据挖掘研究院

DHTML对象模型（About the DHTML Object Model）(三)

禁止事件：

进一步的思考：

相关主题：