这是我的专栏《JS真好玩》，将教你用JS实现一些有趣的东西。JS可以直接在浏览器运行，可以很方便的跟我学习用JS做好玩儿的事情。感谢大家关注～文章求赞噢！祝大家早日变成一名「前端极客」！
背景
曾经，帮掘金找了一些bug。今天，我们不负众望，继续帮掘金找bug～帮掘金定位问题的过程，需要你对JS有些了解，而且是一般人不知道的小技巧，快来跟我一起学习这个具有创意的技巧吧！
Bug描述
这次的bug比较明显，在作者榜单。
- 你左键点击一个作者的名字，会发现，弹出了2个窗口！
- 你按住Ctrl或Command键点击作者的名字，会发现，在后台弹出了2个窗口！
- 你中键点击一个作者的名字，会发现，弹出了1个窗口。正常。
- 如果你不点击作者的名字，点击作者信息的其它位置，就正常，出现1个窗口。
我是怎么发现的？当你打开一个作者详情页，关闭1次后发现当前页面还是这个作者的详情页，你会感觉见鬼了！就像是穿越回了几秒钟之前。又或有这种感觉：这个作者详情页怎么关不掉？太惊悚了！
Bug原因，来学创意技巧！
第1步，检查触发事件相关dom
这里bug出现在作者名，我们检查作者名，发现是个a标签：
再检查作者详情信息组件，发现是个div标签：
初步怀疑是点击a标签时，同时触发了div的click事件。导致打开2个窗口。
第2步，检查Bug元素的EventListener
这招非常具有创意，很多人不会用，我认为你需要知道：
我们选中某个Html元素后，除了能看它的Style并动态修改style，还可以查看它的事件监听器，看看它绑定了哪些事件。当然，也可以动态修改EventListener。
可以看到，a标签有一个的响应click的EventListener，是冒泡到div.link被捕获触发的～
而根据点击div.link的行为，不难想象它的handleClick（或者叫onClick）是这么写的：
function handleClick(event) {
window.open('作者详情页'); // 新窗口打开作者详情页
}
第3步，验证想法
我们把div.link这个EventListener删掉！看看Bug有没有解决！
Remove它后，再次点击a标签，果然，只会打开1个窗口了！
Bug解决方案
一个方案
禁止a标签的点击事件冒泡，提前捕获，stopPropagation。在click事件里可以什么都不做，继续使用原生的a标签的行为。
一个更好的方案
追求极致用户体验：一切导航功能，都应该允许用户以各种方式打开。
虽然掘金这里静默要求新窗口打开，但是也建议使用a标签结合targer属性实现路由能力。而不要依赖div的onclick。
掘金目前的实现方法，针对作者信息的div.link，用户不能通过鼠标中键的方式打开。
这样不够追求极致用户体验。因为很多时候我愿意通过鼠标中键来打开新窗口，如果功能不支持，我其实用起来没有很爽。
怎么做呢？
建议掘金把div.link改为a标签，然后对a标签添加这个类似的EventListener：
完整代码和解释在下面这篇文章里，建议前端程序员都阅读一下：[极致用户体验] 你的 Link Button 能让用户选择新页面打开吗？。
写在最后
我是HullQin，独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、UNO等游戏，绝不收费，绝无广告。还独立开发了《合成大西瓜重制版》。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这个专栏分享：《教你做小游戏》。
建议大家关注专栏：极致用户体验。我是真的很希望所有前端开发者的网页都能追求极致用户体验。
我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！