网上看到的一个有意思的问题,起因是他写了一个最简单的click事件,大致如下:

这段代码看起来没毛病吧?但是他发现点击之后,无法触发click事件,什么鬼?

问题分析

其实关键是div元素内部就包含一个click方法,我们可以通过以下代码验证:

我们可以看到,div元素内部包含了如下这些属性(部分截图):

js中onclick方法名不能为click

我们可以看到,除了有onclick,onblur,onfocus,还有click,focus,blur。

例如你在onclick方法里面写了一些东西,那么click也和onclick内容相同,也就是说onclick='click();'中的click其实就是onclick方法本身!那么不会造成无限循环吗?我们将onclick稍微改改:onclick="console.log('this is click');click();"。

我们可以发现只打印了两句this is click,并没有预期的死循环,这个可能是内部做了判断,如果是内部触发就不继续了。

按照上面的理论,那么下面的代码也是可以运行的:

最然没有定义click,但是在onclick内部,click就是onclick;而且就算你定义了window.click方法,在onclick内部的click也是onclick方法本身,不会变成window.click。上述代码会执行两次abc方法。

类似问题

上面的div元素,除了click会出现这样的问题,focus,blur也会出现同样的问题。

除了div外,其他元素也有可能出现这种情况,例如form元素中使用:onsubmit='submit()',我们打印属性不难发现submit和reset也是同样的规律:

js中onclick方法名不能为click

因此起名的时候,最好不要起这种相同的比较好。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字