Jquery - Problemas com evento click e blur

[rafaeldorazio 2]

o problema é que eu tenho uma textbox com evento onblur, e um botao com evento click.

Sempre o textbox vai estar com o focu, quando eu clico no botao o textbox perde o focu e executa o evento blur e depois executa o evento click.

Como eu faria para apenas executar o evento click sem executar o evento onblur ?

[rodrigo I.O 0]

Poste o trecho do seu código aí.. (só o necessário..)

[William Bruno 1501]

Rode esse exemplo a parte, para entender melhor a situação:

 

<script type="text/javascript">
function id( el ){
return document.getElementById( el );
}
function escreve(){
id('result').innerHTML += i+'<br />';
i++;
}
var i = 0;
var itv = 0;
window.onload = function(){
id('q').onblur = function(){
	window.clearInterval( itv );
	itv = window.setInterval( escreve, 200 ); 
}
id('ok').onclick = function(){
	id('result').innerHTML += 'cancelar ação<br />';
	window.clearInterval( itv );
}
}
</script>

<input type="text" name="q" id="q" />
<input type="button" name="ok" value="Ok" id="ok" />

<div id="result"></div>

 

nos testes que eu fiz, o onblur acontece junto com o onchange, ou seja se trocar de input pelo teclado, o onblur é disparado instantaneamente

porém se você for com o mouse, o onblur demora algum tempo para ocorrer.

 

Sugir atrasar com um window.setTimeout(), o disparo da função, mesmo depois do onblur.

assim você pode cancelar ela com um clearTimeout(), no onclick do botão.

[rafaeldorazio 2]

<script type="text/javascript">
function id( el ){
       return document.getElementById( el );
}
function escreve(){
       id('result').innerHTML += i+'<br />';
       i++;
}
var i = 0;
var itv = 0;
window.onload = function(){

id('q').focus();

       id('q').onblur = function(){
               window.clearInterval( itv );
               itv = window.setInterval( escreve, 200 ); 
       }
       id('cboption').onclick = function(){
               id('result').innerHTML += 'cancelar ação<br />';
               window.clearInterval( itv );
       }
}
</script>

<input type="text" name="q" id="q" />
<div id="cboption" style="overflow-y: scroll;max-height: 20px">
<div value="1">Campo 1</div>
<div value="2">Campo 2</div>
<div value="3">Campo 3</div>
<div value="4">Campo 4</div>
<div value="5">Campo 5</div>
<div value="6">Campo 6</div>
<div value="7">Campo 7</div>
<div value="8">Campo 8</div>
<div value="9">Campo 9</div>
</div>

<div id="result"></div>

 

Sempre o focu vai estar no text, entao quando você clicar em um das divs campos1 , campos2 etc, o blur vai ser executado

[William Bruno 1501]

Sempre o focu vai estar no text, entao quando você clicar em um das divs campos1 , campos2 etc, o blur vai ser executado

sim, porém se você atrasar o disparo da função(que depende do evento, e não o evento em si), e limpar o interval ao clicar, o disparo não vai ocorrer.

 

ao menos, foi a única forma de resolver que pensei.

 

compare por exemplo:

window.onload = function(){

id('q').focus();

id('q').onblur = function(){
	tot = window.setTimeout( escreve, 500 ); 
}
id('cboption').onclick = function(){
	id('result').innerHTML += 'cancelar ação<br />';
	window.clearTimeout( tot );
}
}

assim que ocorrer o blur, a função escreve só será disparada depois de 500milisegundos.

se esse onblur ocorrer por causa do click no #cboption, então mando um clearTimeout, que vai zerar o contador que atrasou a chamada do 'escreve', e assim ao clicar no #cboption, a função escreve não será chamada. Entendeu ?

 

faça alguns testes.

Evento onblur ao ir para qq lugar

Evento onblur ao clicar no #cboption

 

 

pelo que vi aqui, funciona bem.

[rafaeldorazio 2]

Bruno, só está com um probleminha, supondo que haja scroll, quando eu clico na scroll para decer está executando o blur !

A scroll está no cbOption !

[William Bruno 1501]

Entao você tera que zerar o Timeout, em outro elemento.

 

Geralmente um click num elemento filho, significa um click no pai.

[rafaeldorazio 2]

Willian

você me orientou a zerar o timeOut, seria o clearTimeout ? Se for não está dando certo !

 

$(txtComboBox).bind("click", clickTxt).bind("blur", function () { tot = window.setTimeout(blurTxt, 200); })
$(cbOption).bind("click", function () { window.clearTimeout(tot); });

 

Estou com um dilema, funcionar funciona por 2 milesimos, pq se eu setar um valor pequeno, quando clicar na scroll vai ter 2 mil para o evento blur ser executado, caso eu aumente vai ficar horrivel pois no evento blur eu escondo o elemento, imagina 5segundos ou ate mais para o elemento ficar escondido.