Подтвердить что ты не робот

Запуск нажатия кнопки с элемента без кнопки

Как вы можете вызвать событие клика из элемента, который предположительно не имеет привычного поведения с кликом?

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

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

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

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

Идеи?

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

4b9b3361

Ответ 1

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

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

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

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 (как указано в версии 12.0.742.100).
  • Safari на iPhone 4 с iOS 4.2.1 использует onclick.

Тест script:

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, чтобы доказать, что он работает с реальными кликами тоже.

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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