В реальной разработке приложений мы часто используем события модуля JS, но иногда мы сталкиваемся с некоторыми проблемами, такими как события щелчка. В качестве простого примера нажмите кнопку «Отправить» за пределами формы, чтобы отправить форму. Давайте закодируем.
HTML:
Скопируйте код кода следующим образом:
<h3> Нажмите «Отправить», и также сработает событие нажатия кнопки отправки теста. </h3>
<button id="btn">Отправить</button>
<form action="#" метод="get" id="form">
<input type="text" name="site" value="www.woiweb.net" только для чтения/>
<input id="subbtn" type="submit" value="Пока не нажимайте эту кнопку, чтобы отправить" onclick="alert('Я отправил');"/>
</форма>
Явскрипт:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//общий метод
btn.onclick = функция() {
суб.клик();
}
</скрипт>
После тестирования проблем с IE, FF, Chrome, Opera и Safari не возникло, форму можно отправить нормально.
Но в реальном дизайне, чтобы кнопки отправки выглядели лучше, разработчики часто используют тег для их обработки и добавляют фоновое изображение для имитации кнопки. Мы все еще используем приведенную выше идею, чтобы попытаться добавить тег, позволяющий отправить кнопку. .Форма, мы модифицируем только html.
HTML:
Скопируйте код кода следующим образом:
<h3> Нажмите «Отправить», и также сработает событие нажатия кнопки отправки теста. </h3>
<button id="btn">Отправить</button>
<form action="#" метод="get" id="form">
<input type="text" name="site" value="www.woiweb.net" только для чтения/>
<!--<input id="subbtn" type="submit" value="Пока не нажимайте эту кнопку, чтобы отправить" onclick="alert('Я отправил');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('Вызовите метод для отправки формы здесь')">Имитировать кнопку отправки</a>
</форма>
Javascript:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//общий метод
btn.onclick = функция() {
суб.клик();
}
</скрипт>
После запуска возникла проблема. IE, FF и Opera работали нормально, но Chrome и Safari не могли нормально работать. Позже я поискал в Интернете и обнаружил, что метка не имеет того же события onclick(), что и кнопка. Решение для IE и FF пишет разную логику, код JS следующий:
яваскрипт:
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//общий метод
btn.onclick = функция() {
//sub.click();
if (/msie/i.test(navigator.userAgent)) //IE
{
sub.fireEvent("onclick");
} еще {
var e = document.createEvent('MouseEvent');
e.initEvent('клик', ложь, ложь);
sub.dispatchEvent(e);
}
}
</скрипт>
На этом этапе проблема решена. Хотя эта проблема очень проста, все ее легко игнорируют. Я опубликовал ее, чтобы поделиться со всеми.
грамматика:
createEvent (тип события)
Описание параметра
eventType — это имя модуля событий объекта Event, который вы хотите получить. Список допустимых типов событий см. в разделе «Описание».
возвращаемое значение
Возвращает вновь созданный объект Event указанного типа.
Бросать
Если реализация поддерживает требуемый тип события, этот метод выдаст исключение DOMException с кодом NOT_SUPPORTED_ERR.
иллюстрировать
Этот метод создает новый тип события, указанный параметром eventType. Обратите внимание, что значением этого параметра является не имя создаваемого интерфейса событий, а имя модуля DOM, определяющего этот интерфейс.
В следующей таблице перечислены допустимые значения eventType и интерфейс событий, созданный каждым значением:
Метод инициализации интерфейса событий параметров
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
После создания объекта Event с помощью этого метода объект необходимо инициализировать с помощью метода инициализации, показанного в таблице выше. Дополнительные сведения о методах инициализации см. в разделе Справочник по объектам событий.
На самом деле этот метод определяется не интерфейсом Document, а интерфейсом DocumentEvent. Если реализация поддерживает модуль Event, то объект Document реализует интерфейс DocumentEvent и поддерживает этот метод.