js 事件穿透问题

zhenglilong_2010 2011-01-10 02:31:09

需求：
1.有一个地图图片，上面有十几个红点，点击红点，响应事件，弹出一个div层
问题：弹出div层后，这个层覆盖点某些红点，导致点击不了，如何解决
上代码：
地图热点



   <div class="weizhi_main"><img src="../images/weizhi_ditu.jpg" border="0" usemap="#Map"  style="margin-left:8px; margin-top:8px;z-index:2; " />

   <map name="Map" id="Map">

   	<area shape="rect" coords="417,462,493,499" href="javascript:showSiChuan('xujiahui')" />

   	<area shape="rect" coords="550,381,599,435" href="javascript:showSiChuan('huaihailu')" />

   	<area shape="rect" coords="676,364,739,403" href="javascript:showSiChuan('yuyuan')" />

   	<area shape="rect" coords="608,302,652,351" href="javascript:showSiChuan('nanjingdonglu')" />

   	<area shape="rect" coords="655,274,703,315" href="javascript:showSiChuan('waitan')" />

   	<area shape="rect" coords="735,295,785,346" href="javascript:showSiChuan('lujiazui')" />

   	<area shape="rect" coords="788,312,842,365" href="javascript:showSiChuan('babaiban')" />

   	<area shape="rect" coords="527,315,581,367" href="javascript:showSiChuan('nanjingxilu')" />

   	<area shape="rect" coords="463,320,509,368" href="javascript:showSiChuan('jinganshi')" />

   	<area shape="rect" coords="383,340,443,398" href="javascript:showSiChuan('zhongshan')" />

   	<area shape="rect" coords="307,368,370,411" href="javascript:showSiChuan('hongqiao')" />

   	<area shape="rect" coords="638,174,704,228" href="javascript:showSiChuan('sichuanbeilu')" />

   	<area shape="rect" coords="736,64,813,105" href="javascript:showSiChuan('wujiaochang')" />

   	<area shape="rect" coords="493,128,555,168" href="javascript:showSiChuan('daling')" />

   	</map>

   	</div>

弹出层



   <div class="weizhixinxi" id="nanjingxilu" style="display:none;">

     <div class="xinxi_top" id="nanjingxilu_top">南京西路商圈（您现在所在的位置）</div>

	 <div class="xinxi_down_left" id="nanjingxilu_down_left"><a href="nanjingdonglu.html"><img src="../images/nanjingdonglu.jpg" width="145" height="107" border="0" /></a>

	   <div class="xinxi_down" id="nanjingxilu_down"><a href="nanjingxilu.html">南京西路商圈</a></div>

	 </div>

	 <div class="xinxi_down_right" id="nanjingxilu_down_right">    <a href="nanjingxilu.html">南京西路商圈位于静安区东南部横贯东西，地形特征好似一把开启致富之门的“金钥匙“，具有明显的区位优势.......

	   </a>

	   <div  class="xinxi_down_right_down" id="nanjingxilu_down_right_down"><a href="nanjingxilu.html">更多</a></div>	 

	 </div>

	 <div class="donghua_nanjingxilu" id="nanjingxilu_donghua"></div>

   </div>

...全文

604 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

打字员 2011-01-12

打赏
举报

给弹出层加一个拖动事件撒，如果挡住了，用户自己就会把它移到一边去的。

fxs_2008 2011-01-12

打赏
举报

不如先放大再点击吧

zhenglilong_2010 2011-01-12

打赏
举报

网上找了资料
通过设置弹出层的style: pointer-events:none 即可实现，但是它不支持IE
求解

zhenglilong_2010 2011-01-11

打赏
举报

[Quote=引用 4 楼 theforever 的回复:]

如果特意想节省操作，直接点击其它点切换显示，而不需点击关闭，可以从以下方法中选择：

1。首先从视图设计上进行调整，看看是否有更得体的呈现。
2。参照我上面说的鼠标划过自然显示的那种，即使是点击弹出，也可以设为在鼠标离开触发点范围时自动隐藏。
3。实在不想自动隐藏的话，监测鼠标位置，和各个点的坐标相比较，在一定很小的范围内，就认为到了该目标点，调整该点的z-index为最大，即在上层显示……
[/Quote]
1.页面调整不了
2.它是个触摸屏，给用户点击用的，鼠标离开出发点范围就自动隐藏，这种方法可能不行
除了设置z-index的方法外
还有别的方法吗
透过一个div，点击链接

zhenglilong_2010 2011-01-11

打赏
举报

实际上要解决的就是下层元素被点击

碧海情天-赵亮 2011-01-10

打赏
举报

如果特意想节省操作，直接点击其它点切换显示，而不需点击关闭，可以从以下方法中选择：

1。首先从视图设计上进行调整，看看是否有更得体的呈现。
2。参照我上面说的鼠标划过自然显示的那种，即使是点击弹出，也可以设为在鼠标离开触发点范围时自动隐藏。
3。实在不想自动隐藏的话，监测鼠标位置，和各个点的坐标相比较，在一定很小的范围内，就认为到了该目标点，调整该点的z-index为最大，即在上层显示。但这个应在没办法时才考虑，因为你显示出来的内容，也许某个内容也是需要点击而又恰巧和某个挡住的点重合，这样的话，这二者你就只能操作一个而不能分别相应去操作了。