Как я могу программно вызывать событие onclick() из тега привязки, сохраняя эту ссылку в функции onclick?

Следующее не работает... (по крайней мере, в Firefox: document.getElementById('linkid').click() не является функцией)

<script type="text/javascript">
    function doOnClick() {
        document.getElementById('linkid').click();
        //Should alert('/testlocation');
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

ОТВЕТЫ

Ответ 1

Вам нужно apply обработчик событий в контексте этого элемента:

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

В противном случае this будет ссылаться на контекст, в котором выполняется указанный код.

Ответ 2

Лучший способ решить эту проблему - использовать Vanilla JS, но если вы уже используете jQuery, есть очень простое решение:

<script type="text/javascript">
    function doOnClick() {
        $('#linkid').click();
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

Протестировано в IE8-10, Chrome, Firefox.

Ответ 3

Чтобы инициировать событие, вы в основном просто вызываете обработчик событий для этого элемент. Незначительное изменение вашего кода.

var a = document.getElementById("element");
var evnt = a["onclick"];

if (typeof(evnt) == "function") {
    evnt.call(a);
}

Ответ 4

$("#linkid").trigger("click");

Ответ 5

Конечно, OP очень точно заявил, что это не сработало, но сработало для меня. Судя по примечаниям в моем источнике, кажется, что это было реализовано во время или после публикации OP. Возможно, это более стандартное сейчас.

document.getElementsByName('MyElementsName')[0].click();

В моем случае у моей кнопки не было идентификатора. Если ваш элемент имеет идентификатор, желательно использовать следующее (не проверено).

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

Я первоначально попробовал этот метод, и он не работал. После Googling я вернулся и понял, что мой элемент был по имени, и не было удостоверения личности. Проверьте, что вы называете правильный атрибут.

Источник: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Ответ 6

Посмотрите на метод handleEvent
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

"Raw" Javascript:

function MyObj() {
   this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
   console.log("caught event: "+e.type);
   console.log(this.abc);
}

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj);

Теперь нажмите на свой элемент (с идентификатором "myElement" ), и он должен напечатать на консоли следующее:

пойманное событие: нажмите кнопку ABC

Это позволяет вам иметь объект-метод как обработчик событий и иметь доступ ко всем свойствам объекта в этом методе.

Вы не можете просто передать метод объекта addEventListener напрямую (например: element.addEventListener('click',myObj.myMethod);) и ожидать, что myMethod будет действовать так, как если бы я обычно вызывался на объект. Я предполагаю, что любая функция, переданная addEventListener, как-то скопирована вместо ссылки. Например, если вы передаете ссылку функции прослушивателя событий на addEventListener (в форме переменной), то отключите эту ссылку, прослушиватель событий все еще будет выполнен, когда будут обнаружены события.

Еще одно (менее элегантное) обходное решение для передачи метода как прослушивателя событий и stil this и до сих пор имеет доступ к свойствам объекта в прослушивателе событий, было бы примерно так:

// see above for definition of MyObj

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));

Ответ 7

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

Я бы предложил следующее:

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

handler = function(){
   showHref(el);
}

showHref = function(el) {
   alert(el.href);
}

var el = document.getElementById('linkid');

addEvent(el, 'click', handler);

Если вы хотите вызывать одну и ту же функцию из другого кода javascript, имитация щелчка для вызова функции - это не самый лучший способ. Рассмотрим:

function doOnClick() {
   showHref(document.getElementById('linkid'));
}

Ответ 8

Старая ветка, но вопрос все еще актуален, так что...

(1) Пример вашего вопроса теперь работает в Firefox. Однако, в дополнение к вызову обработчика событий (который отображает предупреждение), он также щелкает ссылку, вызывая навигацию (после того, как предупреждение отклонено).

(2) Чтобы ПРОСТО вызвать вызов обработчика события (без запуска навигации), просто замените:

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

с

document.getElementById('linkid').onclick();

Ответ 9

В общем, я бы рекомендовал не вызывать обработчики событий вручную.

  • Непонятно, что будет выполнено из-за нескольких зарегистрированных слушатели
  • Опасность попасть в рекурсивный и бесконечный цикл событий (нажмите A триггер Нажмите кнопку B, нажав кнопку A и т.д.)
  • Резервные обновления для DOM
  • Трудно отличить фактические изменения в представлении, вызванные пользователем от изменений, сделанных как код инициализации (который должен запускаться только один раз).

Лучше всего выяснить, что именно вы хотите получить, поместить это в функцию и вызвать ее вручную И зарегистрировать ее как прослушиватель событий.