2017-10-18 15 views
0

Lorsqu'un gestionnaire d'événements onFocus d'un élément modifie la position de l'élément, le gestionnaire d'événements onClick ne se déclenche pas. C'est probablement parce que l'événement click est en fait la combinaison des événements mousedown et mouseup. Donc d'abord mousedown se déclenche, alors l'élément obtient le focus et le gestionnaire change la position de l'élément. Puis mouseup se déclenche, mais le curseur est sur un élément différent à ce moment et le gestionnaire de clic n'est pas appelé.L'événement Click ne se déclenche pas pour un élément qui change de position lorsque le focus est

Voici l'exemple:

var container = document.getElementById('container'); 
 
var button = document.getElementById('button'); 
 
container.style.position = "absolute"; 
 
container.style.marginTop = "40px"; 
 
button.addEventListener('click', function() { 
 
    alert('Clicked'); 
 
}, false); 
 
button.addEventListener('focus', function() { 
 
    container.style.top = (container.getBoundingClientRect().top - 10) + 'px'; 
 
    this.blur(); 
 
}, false);
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>ClickFocusIssue</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <button id="button">Button</button> 
 
    </div> 
 
</body> 
 

 
</html>

En particulier, j'ai une table avec défilement scrollable personnalisée. J'en ai besoin pour faire défiler vers le haut et vers le bas, lorsque les lignes de la table reçoivent le focus, par ex. avec Touche Tab. Mais je dois aussi gérer les clics.

Existe-t-il un bon moyen de gérer les deux événements simultanément?

+1

Cliquez axera ses travaux, alors pourquoi ne pas gérer tout cela en cas de mise au point? – Kramb

+0

as-tu essayé l'accordéon bootstrap ..? https://www.w3schools.com/bootstrap/bootstrap_collapse.asp –

+0

@Kramb, parce que le gestionnaire de clic faire quelque chose de plus, je n'en ai pas besoin, juste en recevant le focus. – aexieh

Répondre

0

Vous pouvez utiliser l'événement mousedown au lieu de cliquer. Il tirera avant l'événement de mise au point.

var container = document.getElementById('container'); 
 
var button = document.getElementById('button'); 
 
container.style.position = "absolute"; 
 
container.style.marginTop = "40px"; 
 
button.addEventListener('mousedown', function() { 
 
    alert('Clicked'); 
 
}, false); 
 
button.addEventListener('focus', function() { 
 
    container.style.top = (container.getBoundingClientRect().top - 10) + 'px'; 
 
    this.blur(); 
 
}, false);
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>ClickFocusIssue</title> 
 
</head> 
 

 
<body> 
 
    <div id="container"> 
 
    <button id="button">Button</button> 
 
    </div> 
 
</body> 
 

 
</html>