昨天，在改以前的项目的时候，出现了一个不大但是很头疼的问题。
问题描述：
手机端的页面，需要加一个事件，但是当我添加的时候发现，每个事件会执行两次，所以我在script的标签里直接alert(123)，发现直接执行alert也是弹出两次。然后用了console.log，类似下面这样
<script>
console.log("直接输出")
</script>
然后打开控制台出现下面的结果
谷歌浏览器：
TIM截图20171226153156.png
在火狐浏览器里
TIM图片20171226153726.png
是这样的。
每个后面都有一个VM的输出。
不习惯啰嗦，应该问题情况描述清楚了吧。
解决过程：
在我修改的这个项目中，用的是jquerymobile框架。然鹅，在jquerymobile框架中每个页面渲染，在body里必须有data-role='page'属性。然鹅在我的这个项目里应用了mobile框架，但是并没有data-role='page'属性的标签，在调试工具里看代码的时候却又有这个东西。
所以这就是当你页面里没有规定data-role='page'的时候，mobile的js会自己创建一个
<div data-role='page'></div>
并且会把<body></body>标签中的所有内容蹂躏一遍塞到这个div中。然鹅这个项目中的js就写在body中。所以就造成了现在这种js执行两次的情况。
解决办法：
现在知道了为什么，那么我就直接在body下新建一个
<div data-role='page'></div>
并且也是把<body></body>标签中的所有东西蹂躏一下塞进去。这样问题就OK拉。
扩展：
当然，有的时候你并不是跟我的问题类似。也没有引入jquerymobile，然鹅仍然出现了这个问题。那么可能你的项目里有虚拟加载，或者reload之类的事件。解决办法就是，把你的js扔到body外面去。如果还有问题，好吧。具体问题具体分析。
网友评论