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

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?

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.

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;

});

Existe uma solução alternativa para o IE - use SVG embutido e defina eventos-ponteiro = "nenhum" no SVG. Veja minha resposta em Como fazer o Internet Explorer emular eventos-ponteiro: nenhum?

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"

Aqui está um pequeno script implementando esse recurso (inspirado no artigo do blog Shea Frederick mencionado por Kyle):

• Eventos de ponteiro Polyfill .

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.

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.

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ê.

Usar OnClientClick = "return false;"

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.

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

Melhor solução:

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

Funciona perfeitamente em todos os navegadores