为iframe添加鼠标事件
1、关于iframe标签
使用iframe元素会创建包含另外一个文档的内联框架（即行内框架）。所以我们可以使用iframe标签，在一个页面嵌入另一个页面。通过指定iframe的src为另一个页面的路径，从而达到这个需求。然而iframe却不支持有些事件，比如鼠标的mousemove事件。对于这个需求，我们只有通过另外一种方式达到。
2、解决方法
现在有两个页面一个是index.html页面，另一个是page.html。我们需要在index.html页面中通过iframe引入page.html。并且需要为iframe的区域 添加鼠标的mousemove事件。
思路如下：
a、先将iframe放在一个div(div1)里面，将这个div的index-z值设置成1.
b、在页面中再添加一个div(div2)，将这个div覆盖整个页面，并且为透明，index-z值设置比1大。
这样我们只需监听第二个div的鼠标事件即可，在鼠标事件触发的函数里面做处理。
当鼠标事件触发后，把div2的display设置成block，当函数处理完成之后，又将div2的display设置成none。这样基本满足需求。
3、相关代码
index.html代码：
1 <html> 2 <head> 3 <title>Demo</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 5 <script type="text/javascript" src="script.js"></script> 6 </head> 7 <script type="text/javascript"> 8 var containerdiv; 9 function div_mousemove(){ 10 containerdiv = document.getElementById("container"); 11 containerdiv.style.display = "none"; 12 alert("onmousemove"); 13 containerdiv.style.display = "block"; 14 } 15 </script> 16 <body > 17 <div id="container" onmousemove="div_mousemove();" style="background:rgba(250,0,0,0);width:100%;height:100%;position:absolute;"></div> 18 <div id="ar" style="background-color: green;index-z:1" > 19 <iframe id="showwin" frameborder="0" style="background-color: red" scrolling="no" width="100%" height="100%" ></iframe> 20 </div> 21 </body> 22 </html>
page.html代码：
1 <html> 2 <head> 3 <title> New Document </title> 4 <meta name="Generator" content="EditPlus"> 5 <meta name="Author" content=""> 6 <meta name="Keywords" content=""> 7 <meta name="Description" content=""> 8 </head> 9 <body> 10 this is iframe area 11 </body> 12 </html>
同理鼠标的其他事件可以用这种方式来实现。
