Как программно щелкнуть элемент в JavaScript?
-
03-07-2019 - |
Вопрос
В IE я могу просто вызвать element.click() из JavaScript. Как мне выполнить ту же задачу в Firefox?В идеале мне хотелось бы иметь некоторый JavaScript, который одинаково хорошо работал бы в разных браузерах, но, если необходимо, для этого у меня будет свой JavaScript для каждого браузера.
Решение
А document.createEvent
документация Говорит, что "А создать событие метод устарел.Использовать конструкторы событий вместо."
Поэтому вместо этого вам следует использовать этот метод:
var clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
и запустите его на таком элементе:
element.dispatchEvent(clickEvent);
как показано здесь.
Другие советы
Для Firefox ссылки кажутся «особыми».Единственный способ заставить это работать - использовать createEvent описано здесь на MDN и вызовите функцию initMouseEvent.Даже это не сработало полностью, мне пришлось вручную указать браузеру открыть ссылку...
var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);
while (element)
{
if (element.tagName == "A" && element.href != "")
{
if (element.target == "_blank") { window.open(element.href, element.target); }
else { document.location = element.href; }
element = null;
}
else
{
element = element.parentElement;
}
}
С использованием jQuery вы можете сделать то же самое, например:
$("a").click();
Который «щелкнет» по всем якорям на странице.
element.click() — это стандартный метод, описанный Спецификация W3C DOM.Gecko/Firefox от Mozilla следует стандарту и позволяет вызывать этот метод только для элементов INPUT.
Вы пытаетесь перейти по ссылке или вызвать клик?Вы можете вызвать onclick примерно так:
var link = document.getElementById(linkId);
link.onclick.call(link);
Вот кроссбраузерная рабочая функция (можно использовать и для других обработчиков кликов):
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);
}
}
Я использовал функцию KooiInc, указанную выше, но мне пришлось использовать два разных типа ввода: одну «кнопку» для IE и одну «отправить» для FireFox.Я не совсем уверен, почему, но это работает.
// HTML
<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />
// в JavaScript
var hiddenBtn = document.getElementById("btnEmailHidden");
if (hiddenBtn.fireEvent) {
hiddenBtn.fireEvent('onclick');
hiddenBtn[eType]();
}
else {
// dispatch for firefox + others
var evObj = document.createEvent('MouseEvent');
evObj.initEvent(eType, true, true);
var hiddenBtn2 = document.getElementById("btnEmailHidden2");
hiddenBtn2.dispatchEvent(evObj);
}
Я искал и пробовал много предложений, но в итоге это сработало.Если бы у меня было еще немного времени, я бы хотел выяснить, почему submit работает с FF, а кнопка с IE, но сейчас это было бы роскошью, так что перейдем к следующей проблеме.