资讯专栏INFORMATION COLUMN

页面中千万不要给变量起名top!一次艰难的Debug之路

Ryan_Li / 1389人阅读

摘要:在浏览器中,指代一个对象,始终指向最高层框架,也就是浏览器窗口。当页面中存在框架时,从出发,可以帮助很快得找到想要引用的框架。如果页面不包含框架,即最外层就是唯一的窗口,此时是的一个属性,指向本身。也就是,给定义的事件也会执行。

问题

今天帮人家修Bug,页面大体是这样:有四个按钮,对应上下左右四个方向,点击哪个就使页面上的某个元素向相应方向移动。这本来是个很简单的页面;
代码大体如下:

html

top
bottom
left

每一个onclick事件中本来是有更多的代码的,但是最后找bug找疯掉了,不断的删掉代码,删到这个样子,问题还是存在:无论点击哪个,"top"也会被弹出,也就是说,toponclick也被触发了!

错误定位

万般无奈之下,只好试试弹出top到底是啥,一看到结果一下子就想到什么原因了。

在浏览器中,top指代一个对象,始终指向最高层框架,也就是浏览器窗口。
1. 当页面中存在框架时,从top出发,可以帮助很快得找到想要引用的框架。
2. 如果页面不包含框架,即最外层window就是唯一的window窗口,此时topwindow的一个属性,指向window本身。

javascripttop == window.top;//true
top == window;//true
window == window.top;//true

然而!然而我们是可以给top赋值的,虽然这样的操作是无效的,原来top引用的窗口对象并不会被覆盖,但是浏览器也并不会报错!(所以其实能让浏览抛出异常的错误一般来说是比较好修正的,因为提示的错误信息已经能指明问题所在了。)

错误原因

这样之前那个页面的问题就很清楚了,点击了任何div后,最终事件都会冒泡到window窗口上。也就是,给top定义的onclick事件也会执行。

事后回头想想,debug的思路其实很清晰的,之前已经确定了toponclick事件会很奇怪的执行,那么我们看看top到底是啥,这是个很自然的思路;也不会折腾那么久吧。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91518.html

相关文章

  • Python 工匠:善用变量来改善代码质量

    摘要:变量用的好或不好,和代码质量有着非常重要的联系。简而言之,匈牙利命名法就是把变量的类型缩写,放到变量名的最前面。很多情况下,使用匈牙利命名法是个不错的主意,因为它可以改善你的代码可读性,尤其在那些变量众多同一类型多次出现时。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏作者:朱雷 | 腾讯IEG高级工程师 『Python 工匠』是什么?...

    seanHai 评论0 收藏0
  • 支付宝小程序爬坑之路【1】

    摘要:文件名字支付宝页面标题导航栏背景色是否允许下拉刷新默认页面是否支持纵向拽拉超出实际内容。请求数据请求支付宝的请求是如果需要设置支付宝为微信是参数不同如果是请求,需要给的值加上最终为 ①支付宝创建个人身份 【假如想要变成公司项目的 小程序管理员,千万千万不要变成==自研开发者==】 会设置不了的 ②支付宝的缓存机制 setStorageSync 【设置本地存储】 my.setStor...

    Harpsichord1207 评论0 收藏0
  • css如何实现n宫格布局?

    摘要:常见应用场景现在的界面基本都是大同小异宫格布局现在基本成了每个必然的存在带边框常用在功能导航页面无边框常用在首页分类设计目标在环境下通过实现宫格并且可以支持有无边框和每个格是否正方形有边框且每个格为正方形无边框最终效果百分比小技巧先解释一个 常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在功能导航页面 showImg(htt...

    sarva 评论0 收藏0
  • (css/js)如何起个好名字

    摘要:就会给起名表示求和函数,渐渐地知道最好用英语给变量或者是函数名起名字,尽管有时候英语不好,那就翻翻有道吧。所以有一段时间的命名是很长的两三个单词的驼峰法命名。 什么鬼,又不知道怎么命名class了直接进入正文 记得大一学C语言的时候,那个时候根本没把这当回事吧。所谓的混沌阶段变量名,函数名,随意吧,那个时候写简单地c程序,就好像写着玩,就算复杂点得也不过一二百行,所以变量名什么的,可能...

    Rainie 评论0 收藏0

发表评论

0条评论

Ryan_Li

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<