findElement

Event.findElement(event, tagName) -> Element

从触发事件的 DOM 元素开始(包含该元素),由里而外搜索第一个具有指定标签名称的 DOM 元素。

有时你并不关心触发事件的元素,而是想知道距离事件发生点最近的(可能是触发事件的元素,也可能是该元素的容器节点, 或容器节点的容器,依此类推)具有指定标签的元素(例如 <p>)。而这就是 findElement 所能够做到的。

标签名称(tagName)的比较不区分大小写。

如果没有找到匹配的元素,则返回文档本身(HTMLDocument 节点)。

样例

这里有一个简单的例子,当点击页面时,如果点击的元素或元素的容器是一个段落,则隐藏该段落。

Event.observe(document.body, 'click', function(event) { 
	var elt = Event.findElement(event, 'P'); 
	if (elt != document) 
		$(elt).hide(); 
});

对于更复杂的搜索,仍然需要获得触发事件的元素,然后在该元素上调用 up 方法,这可以让你能够通过 CSS 语法来描述元素的匹配规则,同时支持更进一步的搜索而不仅只是获取第一个匹配的元素 (另外,up 方法返回的元素可以保证已进行了 DOM 扩展):

Event.observe(document.body, 'click', function(event) { 
	// 从触发事件的元素开始,由里而外查找第一个具有 CSS 类名 'container' 的元素
	var elt = $(Event.element(event)).up('.container'); 
	// 或者:第二个 DIV 元素
	// elt = $(Event.element(event)).up('div', 1); 	
	// 或者:第二个具有 CSS 类名 'holder' 的 DIV 元素
	// elt = $(Event.element(event)).up('div.holder', 1); 
	elt.hide();
}); 

参见

如果你希望获取触发事件的元素,只需调用 element 方法即可。