A configuração do atributo desactivado num elemento de regulação da sensibilidade não impede que carregue em eventos

Question

A configuração do atributo desactivado num elemento de regulação da sensibilidade não impede que carregue em eventos

tenho um elemento <span> que faz alguma coisa num evento click.

quando o desactivar, usando jQuery:

$("span").attr("disabled", true);

o manipulador de eventos continua a ser chamado quando eu clicar no elemento span.

Estou a testar no cromado 13. Alguma ideia?

28

html jquery javascript-events

Author: ashik, 2011-07-12

Source

6 answers

score 48 · Answer 1

Tenta isto:

$("span").css("pointer-events", "none");

Você pode ativá-los de volta por

$("span").css("pointer-events", "auto");

score 7 · Answer 2

O atributo disabled não é global e só é permitido nos controlos de formulários. O que você poderia fazer é definir um atributo de dados personalizado (talvez data-disabled) e verificar para esse atributo quando você lidar com o evento clique.

score 7 · Answer 3

O comportamento padrão do atributo desactivado só acontece para os elementos do formulário. Tente desbloquear o evento:

$("span").unbind("click");

score 5 · Answer 4

Tente desvendar o evento. Aqui está o violino

5

Author: Rafay, 2018-07-12 09:43:08

score 1 · Answer 5

Há um truque sujo que usei:

Estou a usar 'bootstrap', por isso adicionei .disabled classe ao elemento que quero desactivar. Bootstrap trata do resto das coisas.

A sugestão é bem-vinda.

Adicionar a classe no tempo de execução:

$('#element').addClass('disabled');

score -1 · Answer 6

O melhor método é embrulhar a extensão dentro de um botão e desactivar o botão

$("#buttonD").click(function(){
  alert("button clicked");
})

$("#buttonS").click(function(){
  alert("span clicked");
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-success" disabled="disabled" id="buttonD">
    <span>Disabled button</span>
</button>

<br>
<br>

 <span class="btn btn-danger" disabled="disabled" id="buttonS">Disabled span</span>