alternativa da propriedade 'pointer-events' do css para o IE

155

Eu tenho um menu de navegação suspenso no qual alguns dos títulos não devem navegar para outra página quando clicados (esses títulos abrem um menu suspenso quando clicados) enquanto outros devem navegar (eles não têm menu suspenso e navegam diretamente). tipos hrefdefiniram para eles

Para resolver isso, adicionei o seguinte css para o antigo tipo de títulos

pointer-events: none;

e está funcionando bem. Mas, como essa propriedade não é suportada pelo IE, estou procurando uma solução alternativa. O irritante é que não tenho acesso nem privilégio para alterar completamente o código HTML e JavaScript .

Alguma ideia?

anupam
fonte
2
Existe uma maneira de obter acesso ao HTML e scripts? Tente conversar com quem lhe deu a tarefa.
Kyle
@Kyle Não é exatamente um problema de privilégio, existem algumas dificuldades técnicas também para modificar o html / javascript código
anupam
2
Aqui está a resposta stackoverflow.com/questions/3680429/…
Sanket Sahu
3
Observe que pointer-eventsagora está no IE11 +
David Storey

Respostas:

88

Pointer-events é um hack da Mozilla e, onde foi implementado nos navegadores Webkit, você não pode esperar vê-lo nos navegadores IE por mais um milhão de anos.

Existe, no entanto, uma solução que encontrei:

Encaminhando eventos do mouse através de camadas

Isso usa um plug-in que usa algumas propriedades não conhecidas / entendidas do Javascript para pegar o evento do mouse e enviá-lo para outro elemento.

Há também outra solução Javascript aqui .

Atualização para outubro de 2013 : aparentemente está chegando ao IE na v11. Fonte . Obrigado Tim.

Kyle
fonte
4
A documentação do ie9 diz que ele suporta esta propriedade (de qualquer forma, eu ainda não tentei o ie9). Vou tentar modificar o código html / js em vez de passar o tempo a partir desta problem.Thanks muito pelo seu tempo e ajuda
anupam
11
No W3C, esse problema foi discutido devido ao seqüestro de cliques . Regra prática: assim que o W3C publicar a recomendação do candidato, a equipe do IE a implementará e sempre haverá uma lição às pressas que desperdiça . Além disso, a Mozilla disse tudo " Aviso: O uso de eventos de ponteiro no CSS para elementos não-SVG é experimental. O recurso costumava fazer parte da especificação de rascunho da interface do usuário do CSS3, mas, devido a muitos problemas em aberto, foi adiado para o CSS4 . "
vulcan raven
8
De acordo com caniuse.com, os eventos do ponteiro CSS estão chegando ao IE 11. caniuse.com/#feat=pointer-events
Tim
4
Essa não é uma razão para reduzir a votação de uma resposta @eyurdakul
scumah
14
"you can't expect to see it in IE browsers for another million years."Levou apenas 3 anos ...
ProblemsOfSumit
20

Aqui está outra solução que é muito fácil de implementar com 5 linhas de código:

  1. Capture o evento 'mousedown' para o elemento top (o elemento que você deseja desativar os eventos do ponteiro).
  2. Na 'mousedown', oculte o elemento superior.
  3. Use 'document.elementFromPoint ()' para obter o elemento subjacente.
  4. Mostrar o elemento superior.
  5. Execute o evento desejado para o elemento subjacente.

Exemplo:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});
MarzSocks
fonte
2
Isso funcionou para mim. Eu prefiro pequenas correções que eu posso colocar em meu código js em vez de adicionar um monte de polyfills;)
dippas
Esta é uma solução criativa, eu gosto. O único problema é isto acrescenta processamento desnecessário para os navegadores, onde o ponto de eventos fazer o trabalho. Seria ótimo fazer isso executar apenas condicionalmente os navegadores IE.
Trevor
Concordo, é rapidamente implementável em um problema desconcertante, mas, de fato, na minha implementação, só o aplico se o navegador for o IE, você o colocará nesta verificação: if (navigator.appName == 'Microsoft Internet Explorer' ) {... a lógica vai aqui ..}
MarzSocks 17/01
3
isso funciona muito bem! desde que 11 supostamente começou a dar suporte a eventos de ponteiro, apenas o envolvo nesta cláusula: if (navigator.userAgent.toLowerCase (). indexOf ('msie')> 0) OBRIGADO!
Hank
10

Vale ressaltar que, especificamente para o IE, disabled=disabledfunciona para tags de âncora:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

O IE trata isso como um disabledelemento e não aciona o evento de clique. No entanto, disablednão é um atributo válido em uma marca de âncora. Portanto, isso não funcionará em outros navegadores. Para eles pointer-events:noneé necessário no estilo.

ATUALIZAÇÃO 1 : A adição da regra a seguir me parece uma solução entre navegadores.

ATUALIZAÇÃO 2 : Para maior compatibilidade, porque o IE não formará estilos para tags âncora disabled='disabled', portanto, ainda parecerão ativos. Portanto, a:hover{}regra e estilo são uma boa ideia:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

Trabalhando no Chrome, IE11 e IE8.
Obviamente, o CSS acima pressupõe que as tags âncora sejam renderizadas comdisabled="disabled"

Niks
fonte
1
Isso não funcionou para mim. No IE9-10, as funções onclick ainda são executadas.
certainlyakey
4

Cubra os elementos ofensivos com um bloco invisível, usando um pseudo-elemento: :beforeou:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

Assim, você clica no elemento pai. Não é bom, se o pai for clicável, mas funcionar bem caso contrário.

Graham P Heath
fonte
1
Eu usei uma idéia semelhante com o atributo desativado. No IE, a adição do atributo desativado evita eventos de clique, mas se houver filhos, eles ainda acionarão o clique. cobrir as crianças para que não sejam clicáveis ​​é uma ótima solução para isso. Eu tive que usar uma cor de fundo com opacidade 0 para que o IE registrasse havia um elemento real lá.
Blake Plumb
4

Passei quase dois dias encontrando a solução para esse problema e finalmente encontrei isso.

Isso usa javascript e jquery.

(GitHub) pointer_events_polyfill

Isso pode usar um plug-in javascript para ser baixado / copiado. Basta copiar / baixar os códigos desse site e salvá-lo como pointer_events_polyfill.js. Inclua esse javascript no seu site.

<script src="JS/pointer_events_polyfill.js></script>

Adicione esses scripts jquery ao seu site

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

E não se esqueça de incluir seu plug-in jquery.

Funciona! Eu posso clicar nos elementos abaixo do elemento transparente. Estou usando o IE 10. Espero que isso também funcione no IE 9 e abaixo.

EDIT: O uso desta solução não funciona quando você clica nas caixas de texto abaixo do elemento transparente. Para resolver esse problema, uso o foco quando o usuário clica na caixa de texto.

Javascript:

document.getElementById("theTextbox").focus();

JQuery:

$("#theTextbox").focus();

Isso permite que você digite o texto na caixa de texto.

Mai
fonte
1

Encontrei outra solução para resolver esse problema. Eu uso o jQuery para definir o hrefatributo-como javascript:;(não '', ou o navegador recarregará a página) se a largura da janela do navegador for maior que 1'000px. Você precisa adicionar um ID ao seu link. Aqui está o que estou fazendo:

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

Talvez seja útil para você.

yves.beutler
fonte
0

Usar OnClientClick = "return false;"

Medde
fonte
0

Você também pode simplesmente "não" adicionar um URL dentro da <a>tag, eu faço isso para menus que são <a>direcionados a tags também. Se não houver um menu suspenso, adiciono o URL, mas se houver menus suspensos com uma <ul> <li>lista, basta removê-lo.

user3657756
fonte
0

Eu enfrentei problemas semelhantes:

  1. Eu enfrentei esse problema em uma diretiva, corrigi-o adicionando um como elemento pai e criando eventos-ponteiro: nenhum para isso

  2. A correção acima não funcionou para a tag select e adicionei cursor: text (que era o que eu queria) e funcionou para mim

Se um cursor normal for necessário, você poderá adicionar o cursor: default

ZT
fonte
-1

Melhor solução:

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

Funciona perfeitamente em todos os navegadores

Rafa Baldayo
fonte
3
Exceto para a versão IE <11, onde os eventos do ponteiro não são suportados. Você não entendeu.
prisão-mike