Нажать кнопку на элементе, не являющемся кнопкой

Question

Как бы вы инициировали событие click от элемента, который предположительно не имеет нативного поведения, реагирующего на нажатия?

Например, я знаю, что вы могли бы просто использовать следующее:

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

Но что произойдет, если «х» является «DIV»?У меня есть реализация, и она, кажется, не запускается ... Я получаю сообщение об ошибке (chrome 12):

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

Идеи?

Быстрое редактирование - я ищуvanilla JS здесь ... мне нравится изобретать велосипед в моем образе ...: -)

Answer 1

Для классических интерактивных элементов, таких как кнопки или ссылки, click() должно работать во всех браузерах.Однако для других элементов, таких как div, вам нужно onclick() в некоторых браузерах и click() в других.

Я бы настоятельно рекомендовал вместо того, чтобы пытаться выяснить это самостоятельно, использовать библиотеку javascript, такую ​​как MooTools , jQuery , Прототип , YUI и многие другие.Причина в том, что для кроссбраузерности это очень сложно - 1014 * трудно .Зачем тратить свое время, когда другие работали и работали, чтобы сделать это правильно и сделать его супер простым в использовании?Я гарантирую, что если вы потратите свое время на изучение использования фреймворка, вы быстрее освоите свой навык разработки javascript.Позже вы можете вернуться и посмотреть, как все это делается в мельчайших подробностях, если хотите.

Тем не менее, вот скрипт, который будет работать в кросс-браузерном режиме и ничего не будет делать, если ни одно из этих свойств не имеет функцииназначено:

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

Вы также можете сделать это, но, возможно, это немного менее понятно:

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

Некоторые эмпирические тесты, запускающие событие click для div:

• Firefox 3 и 4 используют onclick.
• IE7, 8 используют оба.
• Chrome использует onclick (как проверено в v. 12.0.742.100).
• Safari на iPhone 4 с iOs 4.2.1 использует onclick.

Тестовый скрипт:

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

Запустите его в инструментах разработчика в своем браузере или javascript: впереди и void(0); в конце, затем вставьте в адресную строку и нажмите Enter.Затем попробуйте d.click() и d.onclick().Вы можете щелкнуть сам div, чтобы доказать, что он работает и с реальными щелчками.

Answer 2

Используйте это, если вы действительно хотите запустить событие программно:

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

Answer 3

Вам понадобится функция обнаружения, поскольку разные браузеры (использующие не-html5 doctype) могут поддерживать разные методы dom:

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

Answer 4

Вы можете прикрепить метод onclick ко всему, но если у вас нет событий, связанных с самим фактическим элементом, он выдаст ошибку или просто ничего не сделает.

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

Answer 5

У меня была похожая проблема при попытке использовать метод .click в стандартных браузерах Android. Похоже, замена .click на $('selector').on('click', cb); решает проблему.

Answer 6

Попробуйте сделать что-то вроде следующего:

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