问题描述

今天同事遇到一个神一样的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. C#搭建足球赛事资料库与预测平台(1) 基本介绍

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 去年4月到现在,一年 ...

  2. Activity间中使用Intent传值

    主页面用来输入一个值传入第二个页面显示,关闭第二个页面返回一个值 主页布局: <RelativeLayout xmlns:android="http://schemas.android ...

  3. 20个设计精致的用户界面 PSD 源文件免费下载

    今天这篇文章收集了20个新鲜出炉的用户界面 PSD 源文件素材,你可以免费下载使用.这些免费素材不仅能帮助设计师们节省大量的时间,而且能有很好的效果.感谢那些很有才华的设计师分享它们的劳动成果,让更多 ...

  4. 在SQL Server 2014里可更新的列存储索引 （Updateable Column Store Indexes）

    传统的关系数据库服务引擎往往并不是对超大量数据进行分析计算的最佳平台,为此,SQL Server中开发了分析服务引擎去对大笔数据进行分析计算.当然,对于数据的存放平台SQL Server数据库引擎而言 ...

  5. laravel吐槽系列之一

    最近项目中经常使用到了laravel框架,对于这个框架之前只是弱弱地接触了一点,没有深入接触,这下有时间好好研究它了(主要是不得不研究了).说实话,laravel让我打开眼界了,之前对框架的使用一直停 ...

  6. win10系统下点击关机却自动重启的问题解决思路

    第一步.进入win10系统后,我们点击开始菜单上鼠标右键,选择控制面板   第二步.找到电源选项,点击进去(如何没发现,点击右上角查看方式,更换为小图标)   第三步.点击选择关闭盖子的功能   第四 ...

  7. 【转】Xml序列化

    XML序列化是将对象的公共属性和字段转换为XML格式,以便存储或传输的过程.反序列化则是从XML输出中重新创建原始状态的对象.XML序列化中最主要的类是XmlSerializer类.它的最重要的方法是 ...

  8. 从客户端中检测到有潜在危险的 Request.Form 值 --MVC

    可以在处理Post方法的Action添加一个特性: [ValidateInput(false)],这样处理就更加有针对性,提高页面的安全性. 如: [HttpPost][ValidateInput(f ...

  9. The system cannot find the file specified

    在家工作,程序在家里的电脑运行时,出现一个异常,还是第一见到: Server Error in '/' Application. The system cannot find the file spe ...

  10. Entity Framework 实体框架的形成之旅--Code First的框架设计（5）

    在前面几篇介绍了Entity Framework 实体框架的形成过程,整体框架主要是基于Database First的方式构建,也就是利用EDMX文件的映射关系,构建表与表之间的关系,这种模式弹性好, ...