web-dev-qa-db-fra.com

Déclencher un clic sur un bouton à partir d'un élément non-bouton

Comment déclencheriez-vous un événement de clic à partir d'un élément qui n'aurait supposément pas de comportement cliquable natif?

Par exemple, je sais que vous pouvez simplement utiliser les éléments suivants:

document.getElementById('x').click();

Mais que se passe-t-il si 'x' est un 'DIV'? J'ai une implémentation qui ne semble pas se déclencher ... J'ai l'erreur (chrome 12):

Uncaught TypeError: Object #<HTMLDivElement> has no method 'click'

Des idées?

Quick Edit - Je cherche Vanilla JS ici ... J'aime réinventer la roue dans mon image ... :-)

javascripthtmlclick
15
Abhishek

Pour les éléments cliquables classiques tels que les boutons ou les liens, click() devrait fonctionner dans tous les navigateurs. Cependant, pour d'autres éléments tels que divs, vous avez besoin de onclick() dans certains navigateurs et de click() dans d'autres.

Je recommanderais fortement que, au lieu d'essayer de comprendre cela par vous-même, vous utilisiez une bibliothèque javascript telle que MooTools , jQuery , Prototype , YUI , ou plusieurs autres. La raison en est que le fait de bien utiliser ce logiciel sur plusieurs navigateurs est hard . Pourquoi perdre votre temps quand les autres ont travaillé et travaillé pour bien faire les choses et les rendre super simples à utiliser? Je vous garantis que si vous passez votre temps à apprendre à utiliser un framework, vous pourrez aller plus loin dans vos compétences de développement javascript plus rapidement. Plus tard, vous pourrez revenir et voir comment tout se passe dans les moindres détails si vous le souhaitez.

Ceci dit, voici un script qui fonctionnera sur plusieurs navigateurs et ne fera rien si aucune de ces propriétés n'a de fonction attribuée:

el = document.getElementById('id');
if (el.onclick) {
   el.onclick();
} else if (el.click) {
   el.click();
}

Vous pouvez également le faire, mais c'est peut-être un peu moins clair:

(el.onclick || el.click || function() {})();

Quelques tests empiriques déclenchant l’événement click sur un div:

  • Firefox 3 et 4 utilisent onclick.
  • IE7, 8 utilisent les deux.
  • Chrome utilise onclick (comme vérifié dans la v. 12.0.742.100).
  • Safari sur iPhone 4 avec iOs 4.2.1 utilise onclick.

Script de test:

var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {alert('hello');}; document.body.appendChild(d);

Exécutez ceci dans les outils de développement de votre navigateur, ou javascript: devant et void(0); à la fin, puis collez-le dans la barre d'adresse et appuyez sur Entrée. Ensuite, essayez d.click() et d.onclick(). Vous pouvez cliquer sur la div elle-même pour prouver que cela fonctionne également avec de vrais clics.

27
ErikE

Utilisez ceci si vous voulez réellement déclencher un événement par programme:

function eventFire(el, etype){
  if (el.fireEvent) {
   (el.fireEvent('on' + etype));
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}
//usage
eventFire(document.getElementById('x'),'click');
5
KooiInc

Vous aurez besoin de la fonctionnalité detect, car différents navigateurs (utilisant un doctype autre que html5) peuvent prendre en charge différentes méthodes dom:

var ele = document.getElementById('x');
if(typeof ele.click == 'function') {
  ele.click()
} else if(typeof ele.onclick == 'function') {
  ele.onclick()
}
5
Ben Rowe

Vous pouvez attacher une méthode onclick à n'importe quoi, mais si aucun événement n'est attaché à l'élément lui-même, il se trompera ou ne fera rien.

var el = document.getElementById('x');
el.onclick = function() { //do something };
el.click();
1
Jordan

J'ai eu un problème similaire en essayant d'utiliser la méthode .click sur les navigateurs Android courants. On dirait que remplacer .click par $('selector').on('click', cb); résout le problème.

0
ronalddddd

Essayez de faire quelque chose comme ce qui suit:

var my_div = document.getElementById('x');
my_div.onclick = function() {
   alert('hello world');
}
0
Aaron Hathaway