Déclenchez un bouton à partir d'un élément non-bouton

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

Je recommande vivement que, au lieu d'essayer de comprendre cela, vous utilisez une bibliothèque javascript telle que MooTools , jQuery , Prototype , YUI ou bien d'autres. La raison en est que l'obtention de ces choses directement sur le navigateur est difficile . Pourquoi gaspillez-vous votre temps lorsque d'autres ont travaillé et travaillé pour le faire correctement et le rendre très simple à utiliser? Je vous garantis que si vous passez votre temps à apprendre à utiliser un cadre, vous allez plus loin dans votre compétence de développement javascript. Plus tard, vous pouvez revenir et voir comment tout se fait dans le monde entier si vous le souhaitez.

Cela dit, voici un script qui fonctionnera à travers le navigateur et ne fera rien si aucune de ces propriétés n'a une fonction assignée:

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

Vous pourriez également le faire, mais peut-être cela est-il un peu moins clair:

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

Quelques tests empiriques déclenchant l'événement de clic sur une div:

• Firefox 3 et 4 utilisent onclick .
• IE7, 8 utilisent les deux.
• Chrome utilise onclick (comme vérifié dans 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 dans votre navigateur, ou javascript: en avant et en void(0); À la fin, collez dans la barre d'adresse et appuyez sur Entrée. Ensuite, essayez d.click() et d.onclick() . Vous pouvez cliquer sur le div pour prouver qu'il fonctionne avec des clics réels.

Vous devrez détecter que différents navigateurs (utilisant un doctype non-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() } 

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'); 

Vous pouvez attacher une méthode onclick à quoi que ce soit, mais si vous ne possédez aucun événement associé à l'élément lui-même, il risque d'être effacé ou simplement de ne rien faire.

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

Essayez de faire quelque chose comme suit:

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

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