有关label点击两次的问题

最新推荐文章于 2019-05-15 01:45:36 发布

weixin_34273479

最新推荐文章于 2019-05-15 01:45:36 发布

阅读量176

点赞数

原文链接：https://juejin.im/post/5b349e57f265da59961bdac9

版权

这个问题并不影响项目的呈现效果,但是问题记下了,项目上线之后,就此问题,又做一次详细的了解.

通过删减代码,找到发生此问题的代码.

<div class="item">
  <div class="radio">
    <label class="labela" for="a"><input id="a" type="radio" value="">我是单选按钮</label>
  </div>
</div>
复制代码

我把click事件绑定在item上,然后发现触发了两次,这让我感觉不可思议.也感觉有点莫名其妙.why,why,why 难道是我添加方式不对?然后我换了个姿势重新添加,添加在radio这个div上然而还是这样,不理解还是不理解.

没办法,就将这些节点上全部都添加上click然后console.log一遍,打印的结果是:

我是label > 我是item > 我是radio > 我是input > 我是label > 我是item > 我是radio

嗯 ? what is fu** 这是什么?

如果是先捕获,后冒泡也应该是:

我是item > 我是radio > 我是label > 我是input > 我是label > 我是radio > 我是item

完全不是,这应该怎么理解?

本来想在w3c上面找点线索,发现并没有(也可能是我找的姿势不对,反正没找到),不过找到了一位同仁的一篇博客,然后我就吧input放到label的外面,然后又试了一次,打印的结果是这样的:

我是label > 我是radio > 我是item > 我是input > 我是radio > 我是item

真相慢慢露出水面了.

断开来看 我是label > 我是radio > 我是item 和 我是input > 我是radio > 我是item

原来先是触发 label 由于label的for关联input的id如果你对这句话有疑问,那么传送门然后触发input 分别进行事件冒泡,这样就解释通了.

如果input放在label中的话,input上的冒泡就会多一个我是label 分开来看就是这样:

我是label > 我是item > 我是radio 和 我是input > 我是label > 我是item > 我是radio

强势解释一波.

转载于:https://juejin.im/post/5b349e57f265da59961bdac9

关注