IE下被遮住的iframe能接收事件
今天,2012-2-22,是个很二的日子,遇到了一个诡异的问题~~
下午收到一封信。
to:小灰灰
title:被挡住的iframe也能接收到点击事件小灰灰,今天开发的时候遇到了一个很怪的问题。页面中有一个iframe和一个弹出层。
iframe中是一个可以点击的广告。弹出层挡在iframe上方,当点击iframe中的“hide me”, 虽然层隐藏了,但是同时也触发了iframe中图片的点击,会弹出广告。这个情况只有IE下才会出现。有没有办法可以阻止这个点击?
—————————————————————————
于是我模拟了一个页面,地址:http://4.feifeipan59.sinaapp.com/blog/iframe.html
当点击“hide me”时,弹出层会关闭,但是同时会触发下面的广告点击。
首先,考虑到是不是这个弹出层的层级太低,所以设置了z-index,但是无效。在继而尝试setCapture、cancelBubble、returnValue=false都失败了。
因为问题是IE引起的,所以以下解决方案请在IE下看。
方法一
分析了一下,iframe中的A链接应该在弹出层隐藏的一瞬间仍然被点击到了。
在点击“hide me”时,用一个div盖住广告,然后延迟把这个div隐藏。这个方法也可行,但是一定要在onclick的事件中触发,因为mousedown的时间比click早,所以仍然会触发iframe中的A的点击事件。
地址:http://4.feifeipan59.sinaapp.com/blog/iframe_b.html
方法二
因为Iframe中的有一个链接A,而弹出层中也是链接A。应该是A链接的触发引起的,经过尝试,发现如果将A的href删除,那么也不会出发iframe中的点击。所以可以在点击链接的时候,删除A的href,然后再将href恢复成原本的值。
地址:http://4.feifeipan59.sinaapp.com/blog/iframe_c.html
方法三
尝试之后发现,如果iframe不是跨域的情况,那么就不会触发。
地址:http://4.feifeipan59.sinaapp.com/blog/iframe_d.html
后续:翻查过一些资料,但是没有找到这个问题的根本原因。不过以上的方法可以解决这个诡异的问题。
如果有了解的朋友,也欢迎一起讨论。
本文作者:小灰灰 转载请注明来自:携程UED
最新文章
- Diagramming for WinForms 教程一(读取图元数据)
- C++ 排序、查找的应用
- DOM学习笔记(思维导图)
- sqlserver 索引
- 【风马一族_Android】 图能
- win8安装python环境和pip &; easy_install工具
- BZOI 1507 [NOI2003] Editor
- ndk 编译 boost 库,支持serialization
- hdu 4912 Paths on the tree(树链拆分+贪婪)
- 大白话说Java泛型(一):入门、原理、使用
- [Swift]LeetCode843. 猜猜这个单词 | Guess the Word
- jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)
- .NET Windows API库(Cjwdev.WindowsApi)版本2.2发布
- Python 函数中,参数是传值,还是传引用?
- android bionic c 对比 gnu c
- 报表UI测试点
- Linux巩固记录(4) 运行hadoop 2.7.4自带demo程序验证环境
- 定制自己的new和delete:operator new 和 operator delete
- 在多线程中使用spring的bean
- SpringMVC 问题 org.springframework.beans.factory.BeanDefinitionStoreException