请教：脚本模拟穿透层效果（pointer-events: none）出现的问题

phoenix-sky 社区高级成员 T9 2013-01-08 11:04:12

不少网站上都有这样的效果：A,B2层，B层在A层之上，点击B层能够触发下面A层，CSS3：pointer-events: none；实现起来很方便。

用脚本模拟一个这样的效果，有2个问题没有解决，特请教一下，谢谢！

1：点击B层时，自动触发A层的行为，B层是什么事件行为，A层就触发什么事件行为；
2：解决IE9-IE7不兼容问题。



<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Demo Pos</title>

<style type="text/css">

*{ margin: 0; padding: 0; border: 0; list-style: none; font-size: 1em; font-weight: 100; font-style: normal;  }

body{ padding: 1em; color: #888; }

/**********/

.sels{ display: block; margin: 1em auto; padding: 10px; border: 1px solid #ddd; position: relative; }

.selectValue{ width: 200px; height: 30px; text-align: center; line-height: 30px; border-radius: 4px; border: 1px solid #bbb; background: #eee; background: -webkit-linear-gradient(top,#fff,#ddd); position: absolute; left: 10px; top: 10px; z-index: 100; /*pointer-events: none; CSS3实现此效果*/ }

.selectA{ width: 198px; height: 28px; margin: 1px 0 0 1px; }

</style>

</head>

<body>

<form action="#" class="sels">

	<p class="selectValue" id="tecVal">请选择</p>

	<select name="tec" id="tec" class="selectA">

		<option>JavaScript</option>

		<option>HTML5</option>

		<option>CSS3</option>

		<option>C++</option>

		<option>C</option>

	</select>

</form>

<script type="text/javascript">

function obj(id){ return document.getElementById(id); }

var tecVal=obj("tecVal");

var tec=obj("tec");

function noPointerEvents(em){

  em.onclick=function(e){

    this.style.display="none";

    var x=e.pageX,y=e.pageY,under=document.elementFromPoint(x,y);

    this.style.display="";

    e.stopPropagation();

    e.preventDefault();

    alert(under.innerHTML);

    //触发under，触发类型为e.type;

  };

}

window.onload=function(){ noPointerEvents(tecVal); };

</script>

</body>

</html>