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

Question

Можно ли программно вызывать событие onClick для тега привязки, сохраняя при этом ссылку this на привязку?

Следующее не работает ... (по крайней мере, в 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>

Answer 1

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

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

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

Answer 2

Существует очень простое решение с 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.

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

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

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

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

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

Answer 6

Взгляните на метод handleEvent
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

«Сырой» 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 (в форме переменной), а затем сбросить эту ссылку, прослушиватель событий по-прежнему выполняется при перехвате событий.

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

// see above for definition of MyObj

var myObj = new MyObj();

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

Answer 7

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

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

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

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

с

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

Answer 8

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

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

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

Answer 9

Если вы используете это исключительно для ссылки на функцию в атрибуте 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'));
}