问题描述

今天同事遇到一个神一样的BUG:

在原生浏览器下,为dom元素绑定一个click事件,其中有个a标签外链,点击a后进入其他页面,点击浏览器后退后,页面点击事件全体失效!

我于是用ios测了下没事,用andriod其他浏览器试了下也没事,就是原生的有问题,怀疑是特定的手机有问题,又陆续换了几台,发现原生的都有问题

于是便开始找解决方案,下面就来聊下今天的漫长之路,这里先给会出问题的代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="ttt">
ttt</div>
<br />
<a href="http://www.baidu.com" name="n">百度一下</a>
<script type="text/javascript">
var i = 0;
var appendDiv = function (msg) {
var div = document.createElement('div');
if (msg) {
div.innerHTML = msg;
} else {
div.innerHTML = i++;
}
document.body.appendChild(div);
};
document.addEventListener('click', function (e) {
appendDiv('click')
});
</script>
</body>
</html>

DOM事件丢失

第一步想到的当然是事件丢失了,或者就是不执行了,于是乎写了一段代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="ttt">
ttt</div>
<br />
<a href="http://www.baidu.com" name="n">百度一下</a> dsfsdffd<br>
<script type="text/javascript">
var i = 0; setInterval(function () {
var div = document.createElement('div');
div.innerHTML = i++;
document.body.appendChild(div); var type = 'click'; //要触发的事件类型
var event = document.createEvent('MouseEvents');
event.initMouseEvent(type);
document.dispatchEvent(event); }, 1000);
var appendDiv = function (msg) {
var div = document.createElement('div');
if (msg) {
div.innerHTML = msg;
} else {
div.innerHTML = i++;
}
document.body.appendChild(div);
};
document.addEventListener('click', function (e) {
appendDiv('click')
});
</script>
</body>
</html>

我定时器不停地向浏览器打印数字,而且触发document的click事件,他工作的蛮好的,但是当我点击百度一下再回来时候,便不执行了

因为我们没法在代码层面上获取dom的事件信息,所以暂时只能这样做,而我的判断是,没错!dom事件丢失了

Window事件未丢失

然后我又在这上面纠缠了好久,想试试windows的事件是否丢失,于是写下了以下代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="ttt">
ttt</div>
<br />
<a href="http://www.baidu.com" name="n">百度一下</a> dsfsdffd<br>
<script type="text/javascript">
var i = 0; setInterval(function () {
var div = document.createElement('div');
div.innerHTML = i++;
document.body.appendChild(div); var type = 'click'; //要触发的事件类型
var event = document.createEvent('MouseEvents');
event.initMouseEvent(type);
document.dispatchEvent(event); }, 1000);
var appendDiv = function (msg) {
var div = document.createElement('div');
if (msg) {
div.innerHTML = msg;
} else {
div.innerHTML = i++;
}
document.body.appendChild(div);
};
document.addEventListener('click', function (e) {
appendDiv('click')
}); window.onresize = function () {
appendDiv('onresize')
}
</script>
</body>
</html>

我点击回来后,发现事件还在,于是陷入深深的沉思.沉思.沉思.思.思.思.............

问题解决

最后我无意间将这个问题解决了,而且解决的方案匪夷所思:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="ttt">
ttt</div>
<br />
<a href="http://www.baidu.com" name="n">百度一下</a> dsfsdffd<br>
<script type="text/javascript">
var t = document.getElementById('ttt');
var i = 0;
setInterval(function () {
var div = document.createElement('div');
div.innerHTML = i++;
document.body.appendChild(div);
}, 1000);
var appendDiv = function (msg) {
var div = document.createElement('div');
if (msg) {
div.innerHTML = msg;
} else {
div.innerHTML = i++;
}
document.body.appendChild(div);
};
document.addEventListener('click', function (e) {
appendDiv('click')
});
</script>
</body>
</html>

整个解决方案耗费我两个多小时,而最终却是这么一段不起眼的代码:

var t = document.getElementById('ttt');
// var btnfree = document.getElementsByTagName('a'); 无效
// var n = document.getElementsByName('name');无效

现在问题是解决了,我却更疑惑了,一个大大的问号在我脑里回旋不去,尼玛在玩我啊......这是为什么??????

问题原理猜想

注意,此处完全是扯淡时间

andriod硬件加速

andriod原生浏览器本身使用了硬件加速功能,或者说andriod对自身的浏览器做了很好的处理

我们在页面上看到的页面具有一个dom树,而我们的事件js保存在另一个地方,而此时硬件加速为我们提供了一个类似png的中间件

他负责了通讯,但是在我们该网页转入后台时,这之间的映射关系却被破坏了

而我们js代码中若是多了这么一段代码:

var t = document.getElementById('ttt');

他的映射关系又建立起来了,如果是这样的话,是说的过去的!!!

PS:以上的理论显然无法说服我

垃圾回收/后台挂起

不得已的情况下,我想到了js的垃圾回收,dom结构活生生的在页面上,页面不会回收,里面的i一直在用也不会回收

但是我们的DOM树好像并没有神引用在页面中保存,因为没有浏览器就正好将所有的事件全部销毁了。

而后面我们在js中保存了一个dom树,他就没有销毁????

PS:这里我可以将t给delete了试试,但是我在家没有环境,只得明天再试了,今天暂时到这里

问题追踪

var t = document.getElementById('ttt');
t = null;

最后这样加一句,问题又会复现,所以垃圾回收的概率较高。

结语

当然,这是andriod浏览器本身一个BUG,但是如果我们可以从这种小BUG中发现大问题,或者原理性的东西,那真的该好好的研究一番了!!!

若是您有任何想法,请不吝赐教!!!

原生andriod浏览器回退后dom(click)事件全体失效问题探究的更多相关文章

  1. 关于IOS下click事件委托失效的解决方案

    一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

  2. 手机浏览器下IScroll中click事件

    产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,c ...

  3. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  4. 如何解决 touchstart 事件与 click 事件的冲突

    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...

  5. IOS的Safari浏览器中,点击事件失效的原理及解决办法

    这里做了事件委托,简单区分一下[目标元素]和[代理元素],为后续论述理解做铺垫. [目标元素]:实际希望点击的元素,可以是任意标签. [代理元素]:代替[目标元素]触发点击事件的元素,有可能是目标元素 ...

  6. IOS下的 click 点击失效

    当委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. demo: & ...

  7. safari浏览器click事件要点击两次才有响应出现闪烁

    闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响 ...

  8. 苹果浏览器移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  9. 关于IOS浏览器:document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

随机推荐

  1. JSP开发环境配置问题解答

    有过JSP开发经验的同学对于JSP开发环境的配置一定非常的很有感触,十分的繁琐,有时因为一个小的问题导致我们配置的配置前功尽弃,本篇我将重点带领大家一起探讨一下关于JSP环境配置的一些常见问题,及解决 ...

  2. 国内第一部C#.Net调用Matlab混合编程视频教程

       本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 Matlab和C#混合编程文章目录:[目录]Matlab和C#混合编程文章目录 一.视频说明 2014年的5.1,我将这套视频教 ...

  3. Java多线程系列--“JUC原子类”02之 AtomicLong原子类

    概要 AtomicInteger, AtomicLong和AtomicBoolean这3个基本类型的原子类的原理和用法相似.本章以AtomicLong对基本类型的原子类进行介绍.内容包括:Atomic ...

  4. java之Maven配置和springMvc的简单应用

    初始springMvc这个框架,非常的陌生,而且幸好公司是通过maven这个代码管理工具,可以随时添加依赖.解决了很多问题在以后深入开发中. 项目结构: 通过结构中,pom.xml这个文件其实就说明这 ...

  5. Windows Azure Virtual Machine (29) 修改Azure VM 数据磁盘容量

    <Windows Azure Platform 系列文章目录> 当我们使用Windows Azure管理界面,创建Azure虚拟机的时候,默认挂载的磁盘是固定大小的 1.比如我创建1个Wi ...

  6. SQL Server 存储(5/8):理解IAM 页

    在以前的文章里,我们讨论了数据页,GAM和SGAM,还有PFS页.今天我们一起来讨论下索引分配映射(Index Allocation Map:IAM)页. 在SQL Server 2005和以后的版本 ...

  7. 在浏览器输入网址到页面加载完毕中间到底发生了什么?(Browser-->Server)

    最近在学习韩老师的php视频,中间有讲到发送请求到服务器返回内容,以前对这个理解并不深刻,虽然以前也知道一部分,这次听了之后收获良多:所以我就画了个流程图,从浏览器输入网址到服务器返回信息,浏览器渲染 ...

  8. nodejs中exports与module.exports的实践

    只要是在nodejs中写自己的文件模块就少不了会遇到module.exports和exports的使用,看别人的代码大多都会使用“module.exports=exports=<对象/函数等&g ...

  9. 在_Layout模版中使用@Styles.Render()没有效果

    刚才有测试一个功能,就是在_Layout母版中使用了@Styles.Render()时行Render样式文件,所有在此母版下的视图均没有应用到样式,没有效果.是什么原因? 经查证资料,原来Insus. ...

  10. WCF项目中出现常见错误的解决方法:基础连接已经关闭: 连接被意外关闭

    在我们开发WCF项目的时候,常常会碰到一些莫名其妙的错误,有时候如果根据它的错误提示信息,一般很难定位到具体的问题所在,而由于WCF服务的特殊性,调试起来也不是那么方便,因此往往会花费不少时间来进行跟 ...