Ember.js: Caixas de seleção não clicáveis ​​se contidas em um elemento que possui uma ação anexada.

Criado em 4 dez. 2014  ·  4Comentários  ·  Fonte: emberjs/ember.js

Exemplo simples,

com uma tag de entrada de type = "checkbox" contida dentro dela. A caixa de seleção pode ser clicada conforme o esperado. Agora coloque uma ação no div que o contém, digamos, para capturar eventos de clique ... a caixa de seleção agora não pode ser clicada. Você pode capturar o evento de 'mudança' e ver se ele tenta funcionar conforme o esperado, mas é revertido a cada vez. Alguns violinos abaixo:

funciona como esperado ....
http://jsfiddle.net/yp128r1e/

não ...
http://jsfiddle.net/yp128r1e/1/

Bug

Comentários muito úteis

Por padrão, o auxiliar de ação evita a ação padrão. Nesse caso, isso significa que as caixas de seleção não serão acionadas. Você pode substituir isso definindo preventsDefault=false no auxiliar. Consulte http://jsfiddle.net/yp128r1e/3/.

Todos 4 comentários

@hilem Este não é realmente um problema com todos os tipos de eventos. Parece ser um problema específico com o clique. Suspeito que o Ember está impedindo o comportamento de evento padrão, que o navegador considera significar que a caixa de seleção não deve mudar de estado. Não acredito que seja um bug. A solução seria não aplicar um manipulador de ação dessa maneira se você também quiser lidar com outras coisas, como caixas de seleção.

@wagenet Este é um padrão de design muito comum. Para poder clicar em qualquer lugar em uma linha para selecionar uma linha e não apenas a caixa de seleção da linha. A caixa de seleção é adicionada puramente para reforçar que é selecionável e por motivos de acessibilidade. O que você está me dizendo é que a única maneira de lidar com isso é basicamente não usar uma caixa de seleção, mas simular uma caixa de seleção com imagens ou qualquer outra coisa. Como não há outra maneira de lidar com isso. O que sobrecarrega os testes de acessibilidade que, de outra forma, estariam bem. A propósito, este não é um problema com outros elementos do formulário. Eu só identifiquei esse comportamento com a caixa de seleção. Uma coisa é dizer que o Ember precisa se preocupar com esse problema por um tempo, pois é muito difícil lidar com a maneira como o código está arquitetado atualmente, mas não vejo como você pode argumentar que isso não é um bug.

Por padrão, o auxiliar de ação evita a ação padrão. Nesse caso, isso significa que as caixas de seleção não serão acionadas. Você pode substituir isso definindo preventsDefault=false no auxiliar. Consulte http://jsfiddle.net/yp128r1e/3/.

Obrigado @wagenet !

Esta página foi útil?
0 / 5 - 0 avaliações