Esta é a minha coluna "JS is Fun" que vai te ensinar a fazer algumas coisas interessantes com JS. JS pode ser executado diretamente no navegador e é muito conveniente para mim aprender a usar JS para fazer coisas divertidas. Obrigado pela atenção~ Por favor, curta o artigo! Desejo que todos se tornem um " geek front-end " o mais rápido possível!
fundo
Uma vez, ajudei os Nuggets a encontrar alguns bugs. Hoje, atendemos às expectativas e continuamos a ajudar os Nuggets a encontrar bugs ~ ajudar os Nuggets a localizar o problema. Você precisa de algum conhecimento de JS, e é um pouco de habilidade que as pessoas comuns não conhecem. Venha aprender este criativo habilidade comigo!
- "Encontrei um pequeno bug para o Nuggets, que pode ser usado para aumentar o número de fãs da coluna"
- "Estou aqui para ajudar o Nuggets a corrigir o bug da coluna novamente e, a propósito, ensinar um CSS super incrível para linhas divisórias"
Descrição do bug
Desta vez o bug é mais óbvio, na lista de autores .
- Você clica com o botão esquerdo no nome de um autor e verá que 2 janelas aparecerão!
- Você mantém pressionada a tecla Ctrl ou Command e clica no nome do autor, você verá que 2 janelas aparecem em segundo plano!
- Você clica com o botão do meio no nome de um autor e verá que uma janela aparece. normal.
- Se você não clicar no nome do autor, mas clicar em outro lugar nas informações do autor, será normal e uma janela aparecerá.
Como eu descobri? Quando você abre uma página de detalhes do autor e a fecha uma vez, você descobrirá que a página atual ainda é a página de detalhes do autor, você se sentirá um inferno! É como voltar alguns segundos. Ou tenha este sentimento: Por que esta página de detalhes do autor não pode ser fechada? Tão assustador!
Razões de bugs, venha aprender habilidades criativas!
Etapa 1, verifique o DOM relacionado ao evento de disparo
Aqui o bug aparece no nome do autor, verificamos o nome do autor e descobrimos que é uma tag:
Verifique o componente de detalhes do autor novamente e descubra que é uma tag div:
A suspeita inicial é que quando a tag a é clicada, o evento click da div é acionado ao mesmo tempo. Faz com que 2 janelas se abram.
Etapa 2, verifique o EventListener do elemento Bug
Esse truque é muito criativo, muita gente não usa, acho que você precisa saber:
我们选中某个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 能让用户选择新页面打开吗？。
写在最后
Meu nome é HullQin e desenvolvi de forma independente a "Coleção de Jogos de Tabuleiro Online" . É uma página da web onde você pode facilmente jogar Doudizhu, Gobang, UNO e outros jogos online com seus amigos. Não há cobrança ou propaganda. Também desenvolveu independentemente "Synthetic Big Watermelon Remake" . Se você gostar, pode me seguir~ Quando tiver tempo, compartilharei as técnicas relacionadas à criação de jogos, e as compartilharei nesta coluna: "Ensiná-lo a fazer pequenos jogos" .
Recomenda-se que todos prestem atenção na coluna: experiência extrema do usuário . Eu realmente espero que todas as páginas da web de desenvolvedores front-end possam buscar a melhor experiência do usuário.
Estou participando do "Concurso de Desenvolvimento Criativo" para mais detalhes, veja: O concurso de desenvolvimento criativo do Nuggets está aqui!