Remover click de elemento

[FabianoSouza 5]

Pessoal, tenho essa fn que adiciono ao evento click de um elemento (uma tag SPAN).

Até aqui tudo ok...isso funciona.

elem.addEventListener('click', function(e){openWhatsApp(b, apelido)}, false)

Meu problema está em não conseguir remover essa function do evento click.

Estou tentando remover dessa forma (sem sucesso):

document.getElementById('waapTel1').removeEventListener("click", openWhatsApp);

O elemento está correto...existe. Creio que o problema esteja no fato de usar uma function anônima...mas não sei como resolver.

 

Podem me ajudar?

[Omar~ 87]

Acontece que na primeira situação você tem uma função anônima agregando uma outra função e não um evento de disparo.

E para você encerrar um evento você tem que ter um evento iniciado.

 

Bom nesse caso, você pode ter uma função que ouvirá o evento, assim sendo podemos remover-lo uma vez que alguém está ouvindo.

Outra coisa é que ficou confuso sobre como esse evento deve ser encerrado, uma vez que você tem o objeto elem ao qual dispara o evento, e você tem um DOM#ID waapTel1 que não sei se é elem.

elem.addEventListener('click', ouvirEvento, false);

function ouvirEvento(e) {
    openWhatsApp(b, apelido); // Talvez seja necessário a composisão de objetos ou prototipos para chegar em "b, apelido"
    elem.removeEventListener('click', ouvirEvento);
}

 

 

[FabianoSouza 5]

Olá @Omar~ Estou tentando implementar sua sugestão... mas ainda sem sucesso.

Vou fornecer mais detalhes do meu contexto.

 

Tenho uma caixa de texto com uma function "xpto" que é executada no evento onkeypress.

Caso seja digitado nessa caixa um número de telefone celular, a function "xpto" aplica a function openWhatsApp ao evento click do elemento  #waapTel1  (que é uma simples SPAN). Seria isso:

document.getElementById('waapTel1').addEventListener('click', function(e){openWhatsApp(b, apelido)}, false)

Até aqui ok, isso funciona. Vale dizer que a tag SPAN pode ou não ser clicada, ou seja, o evento click pode ou não ser executado.

 

O problema ocorre ao tentar fazer o caminho reverso: remover a function openWhatsApp do evento click da SPAN #waapTel1 caso o valor contido nessa input text não seja um número de celular (isso também ocorre no evento keypress da caixa de texto).

 

O código abaixo ilustra isso que escrevi.

...
...
if (trataStr.length == 11) // se houver 11 dígitos na caixa de texto...
	{
		toggleIcoWhatsApp_frm(this, trataStr)//essa function que torna #waapTel1 clicável para chamar a fuction openWhatsApp(b, apelido)
			}
	else
		{
//remover o listener click do elemento #waapTel1
	}

 

[Omar~ 87]

Estranho... Deveria encerrar o evento nesse situação aí!

Bom, podemos também usar alguma variável que é mudada conforme o comprimento do input se altere.

Dar uma olhada:

<input type="text" name="telefone" id="telefone" />
<span id="waapTel1">waapTel1</span>

<script>
    var podeClicar = false; // Essa variável quando verdadeira vai realmente chamar a função
    var telefone = document.getElementById('telefone');
    telefone.addEventListener('keypress', verificaNumero, false);
    telefone.value = null; // Apaga qualquer valor no input vindo de cache ou atualização da página

    document.getElementById('waapTel1').addEventListener('click', function (e) {
        if (podeClicar) {
            openWhatsApp(b, apelido);
        }
    }, false);

    function verificaNumero(e) {
        var alvo = e.target.value;
        if (alvo.length >= 11) {
            podeClicar = true;
        } else {
            podeClicar = false;
        }

    }
</script>

 

[FabianoSouza 5]

Olá @Omar~

 

Rodando seu código tenho exatamente o mesmo comportamento que tenho em meu código.... não faz o processo reverso.

Veja seu código aqui no JS Fiddle https://jsfiddle.net/dwu16ky2/

Ao colocar o telefone (e mais um dígito extra), a funcion openWhatsApp() passa a ser executada no click da SPAN.

Mas mesmo apagando o valor da caixa de texto a SPAN continua sendo "clicável" (o que não deveria acontecer).

 

Só adicionei o trecho 

document.getElementById('waapTel1').removeEventListener('click', openWhatsApp) 

 

[Omar~ 87]

Sorry... É que quando coloco um código aqui no forum apenas o escrevo aqui, dificilmente testo antes.

Mas, enfim, podemos então verificar se o valor digitado no input é um número válido toda a vez que waapTel1 é clicado.

Sim o evento vai existir sempre, porém a função só é acionada caso o que está no input seja um número de telefone válido. (Obs.: Usei como referência dados da ANATEL)

Assim aceitando como válido os seguintes tipos de números de telefone:

• +55(99)99999-9999
• +559999999-9999
• +5599999999999
• 9999999-9999
• 99999999999
• 9999-9999
• 99999999

Desta vez testei e está funcionando bem como esperado aqui, dar um olhada:

Spoiler

<input type="text" name="telefone" id="telefone" />
<button id="waapTel1">waapTel1</button>

<script>
    var telefone = document.getElementById('telefone');
    telefone.value = null; // Apaga qualquer valor no input vindo de cache ou atualização da página

    document.getElementById('waapTel1').addEventListener('click', function (e) {
        if (numeroValido()) {
            // openWhatsApp(b, apelido); // Requisitando a função pois o número do input é válido
            console.log('Requisitando a função'); // Só por depuração mesmo
        } 
        else { // Só por depuração mesmo
            console.log('O numero não é válido'); // Só por depuração mesmo
        } // Só por depuração mesmo
    }, false);

    function numeroValido() {
        var numero = ((window.telefone).value); // "numero" getID do input onde é digitado o numero
        if (numero.length && numero.match(/\s/g)) {
            return false;
        } else if (numero.length && !numero.match(/^(?:(?:\+|00)?(55)\s?)?(?:\(?([1-9][0-9])\)?\s?)?(?:((?:9\d|[2-9])\d{3})\-?(\d{4}))$/)) {
            return false;
        } else {
            return true;
        }
    }
</script>

 

 

O problema é que não consegui uma forma de validar se é realmente um número de telefone móvel ou fixo sem conflitar.... 

 

Tomei a liberdade de criar uma máscara ao input fazendo com que o usuário só possa digitar um número de telefone de forma correta (mas para o funcionamento tive de alterar a função):

Spoiler

<input 
    type="text"
    id="telefone"
    maxlength="15"
    placeholder="Forneça o telefone"
    onkeypress="mask(this, mtel)" onblur="clearTimeout()"
    required
    />

<button id="waapTel1">waapTel1</button>

<script>
    var telefone = document.getElementById('telefone'),
            vObj,
            vFun;
    telefone.value = null; // Apaga qualquer valor no input vindo de cache ou atualização da página

    document.getElementById('waapTel1').addEventListener('click', function (e) {
        if (numeroValido()) {
            // openWhatsApp(b, apelido); // Requisitando a função pois o número do input é válido
            console.log('Requisitando a função'); // Só por depuração mesmo
        }
    }, false);

    function numeroValido() {
        var numero = ((window.telefone).value); // "numero" getID do input onde é digitado o numero
        /*
         * Descartamos isso
         * if (numero.length && numero.match(/\s/g)) {
         *     return false;
         * } else
         * if (numero.length && !numero.match(/^(?:(?:\+|00)?(55)\s?)?(?:\(?([1-9][0-9])\)?\s?)?(?:((?:9\d|[2-9])\d{3})\-?(\d{4}))$/)) {
         *     return false;
         * } else {
         *     return true;
         * }
         */

        var exp = /^(?:(?:\+|00)?(55)\s?)?(?:\(?([1-9][0-9])\)?\s?)?(?:((?:9\d|[2-9])\d{3})\-?(\d{4}))$/;
        if (numero.length) {
            return (numero.match(exp) ? true : false);
        } else {
            return false;
        }
    }

    function mask(o, f) {
        window.vObj = o;
        window.vFun = f;
        setTimeout(function () {
            window.vObj.value = window.vFun(window.vObj.value);
        }, 1);
    }

    function mtel(v) {
        var valor = v.replace(/\D/g, '')
                     .replace(/^(\d{2})(\d)/g, '($1) $2')
                     .replace(/(\d)(\d{4})$/, '$1-$2');
        return valor;
    }
</script>

 

 

Em ambos eu testei e está funcional aqui, também de nada adianta isso sem uma verificação do lado do servidor

[FabianoSouza 5]

Olá @Omar~!

Obrigado pela atenção ao meu problema, meu amigo!

Cara, acho  que nos perdemos no objetivo... ou eu que não estou entendendo sua abordagem.

 

Inicialmente (ao carregar a página), a SPAN não estará clicável porque ainda não se digitou 11 dígitos na caixa. Mas caso essa condição seja satisfeita (o usuário tendo digitado 11 números na caixa), a SPAN se tornará clicável.

Depois precisa remover esse comportamento da SPAN caso o usuário apague total ou parcialmente o valor da caixa, entendeu? Tudo em tempo real..à medida se escreve dentro da caixa de texto.

 

É como uma gangorra: se tiver 11 dígitos, tonar SPAN clicável. Caso contrário, remove function do click da SPAN.

Se a caixa voltar a ter 11 dígitos, torna a SPAN clicável novamente e assim vai...

 

Minha dificuldade não está em validações nem na quantidade de dígitos... está em remover uma function do click da SPAN caso a condição não seja satisfeita. É esse o meu problema.

 

O código precisa ter essa inteligência de saber em tempo real se deve ou não tonar a SPAN clicável (para poder chamar a function openWhatsApp).

Já tenho toda a estrutura montada (validação, evento keypress da caixa de texto aplicando function ao click da SPAN). Só preciso mesmo fazer o código remover a function da SPAN se não houver 11 dígitos na caixa.