Saber 酱的抱枕

Fly me to the moon

08/7
2015
学习

js获取获得了焦点的元素

刚才有个同学问了个问题,div里面有个超链接,但点击div时中的其他地方时,也有事件。这样如果点击超链接了,会同时触发“页面跳转”和“div上的事件”这两个事件。我们当然希望这两个事件互不影响。

后来我想到以前看过用js获取当前焦点元素的办法,找了出来,写了个demo,成功了。用的是document.activeElement属性。

原理就是div上发生onclick事件时,判断是不是里面的a标签获得了焦点。如果不是,则触发div上的事件。

demo如下:

<div id="a" style="border:1px solid #f00;width:300px;height:100px;">
	<a href="bbbbb" id="b" target="_blank">bbbbbbb</a>
</div>
<script>
	document.getElementById("a").onclick =function  (argument) {
		if(document.activeElement!=document.getElementById("b")){
			window.open("aaaaa");
		};
	}
</script>

经过试验发现,div是获取不到焦点的。简单的说,table不到div。如果点击div,获取焦点的是body元素。

之前我们想过做定位,让div和超链接处在不同的z-index上,经过试验,没用。但今天想到的有个思路看情况是可以选择使用的:

首先给内部元素设置一个属性,默认为false。当鼠标经过内部元素时,变为true。这样就可以判断点击发生时,点击区域是不是在内部元素上了。

js获取获得了焦点的元素