web-dev-qa-db-de.com

Löst einen Schaltflächenklick von einem Nicht-Schaltflächenelement aus

Wie würden Sie ein Klickereignis aus einem Element auslösen, das angeblich kein systemeigenes anklickbares Verhalten hat?

Ich weiß zum Beispiel, dass Sie einfach Folgendes verwenden könnten:

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

Was passiert aber, wenn 'x' ein 'DIV' ist? Ich habe eine Implementierung, und es scheint nicht auszulösen ... Ich erhalte den Fehler (Chrom 12):

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

Ideen?

Quick Edit - Ich suche Vanilla JS hier ... Ich mag es, das Rad in meinem Bild neu zu erfinden ... :-)

javascripthtmlclick
15
Abhishek

Bei klassischen anklickbaren Elementen wie Schaltflächen oder Links sollte click() in allen Browsern funktionieren. Für andere Elemente wie divs benötigen Sie jedoch onclick() in einigen Browsern und click() in anderen.

Ich würde dringend empfehlen, dass Sie, anstatt zu versuchen, dies selbst herauszufinden, eine Javascript-Bibliothek wie MooTools , jQuery , Prototype , YUI oder viele verwenden Andere. Der Grund dafür ist, dass es richtig ist, dieses Zeug über den Browser zu laden, hard . Warum sollten Sie Ihre Zeit verschwenden, wenn andere gearbeitet und gearbeitet haben, um es richtig zu machen und die Verwendung sehr einfach zu machen? Ich garantiere Ihnen, dass Sie, wenn Sie Ihre Zeit damit verbringen, zu lernen, wie Sie ein Framework verwenden, schneller in die Entwicklung Ihrer Javascript-Entwicklung einsteigen. Später können Sie wiederkommen und sehen, wie alles erledigt wird, wenn Sie möchten.

Das heißt, hier ist ein Skript, das über alle Browser hinweg funktioniert und nichts tut, wenn keine dieser Eigenschaften mit einer Funktion belegt ist:

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

Sie könnten dies auch tun, aber vielleicht ist das etwas weniger klar:

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

Einige empirische Tests, die das Klickereignis für ein div auslösen:

  • Firefox 3 und 4 verwenden onclick.
  • IE7, 8 verwenden beide.
  • Chrome verwendet onclick (wie in Version 12.0.742.100 geprüft).
  • Safari auf dem iPhone 4 mit iOS 4.2.1 verwendet onclick.

Test-Skript:

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

Führen Sie dies in den Entwicklertools in Ihrem Browser aus, oder javascript: vorne und void(0); am Ende, fügen Sie es in die Adressleiste ein und drücken Sie die Eingabetaste. Dann versuchen Sie d.click() und d.onclick(). Sie können auf das div selbst klicken, um zu beweisen, dass es auch mit echten Klicks funktioniert.

27
ErikE

Verwenden Sie diese Option, wenn Sie ein Ereignis tatsächlich programmgesteuert auslösen möchten:

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

Sie müssen erkennen, dass verschiedene Browser (mit Nicht-HTML5-Doctype) unterschiedliche Dom-Methoden unterstützen können:

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

Sie können eine Onclick-Methode an alles anhängen, aber wenn Sie keine Ereignisse an das eigentliche Element selbst angehängt haben, wird dies zu einem Fehler führen oder einfach nichts tun.

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

Ich hatte ein ähnliches Problem, als ich versuchte, die .click-Methode bei gängigen Android-Browsern zu verwenden. Scheint, als würde .click durch $('selector').on('click', cb); ersetzt, um das Problem zu lösen.

0
ronalddddd

Versuchen Sie etwas wie das Folgende:

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