Home  >  Article  >  Web Front-end  >  js simulate click event implementation code_javascript skills

js simulate click event implementation code_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:48:382301browse

html:

复制代码 代码如下:

请单击“提交”,测试提交按钮的单击事件也被触发了。








Javscript:

复制代码 代码如下:



经过测试,IE,FF,Chrome,Opera,Safari都没有问题,均可正常提交表单。

但在实际的设计中,为了让提交按钮更好看,buildder经常把它们用a标签来处理,加个背景图片来模拟按钮,我们仍然用上面的思路来尝试,增加一个a标签,让它来提交表单,我们仅修改html。

Html:
复制代码 代码如下:

请单击“提交”,测试提交按钮的单击事件也被触发了。






模拟提交按钮


javascript:

复制代码 代码如下:




运行后,问题出现了,IE、FF、Opera均OK,但Chrome和Safari不能正常运行,后来网上搜索了下,发现a标签并不是和按钮一样有onclick()事件的,解决办法是针对 IE 和 FF编写不同的逻辑,JS代码如下:
javascript:
复制代码 代码如下:



至此,问题解决,虽然这个问题很简单,但很容易被大家忽略,贴出来和大家一起分享。

语法: 
createEvent(eventType)

参数 描述
eventType 想获取的 Event 对象的事件模块名。关于有效的事件类型列表,请参阅”说明”部分。

Return value

Returns a newly created Event object with the specified type.

Throws

If the implementation supports the required event type, this method will throw a DOMException exception with code NOT_SUPPORTED_ERR.

Description

This method will create a new event type, which is specified by the parameter eventType. Note that the value of this parameter is not the name of the event interface to be created, but the name of the DOM module that defines that interface.

The following table lists the legal values ​​of eventType and the event interface created by each value:

参数 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
Parameters

Event interface

Initialization method
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()

After creating the Event object using this method, the object must be initialized using the initialization method shown in the table above. For details on initialization methods, see the Event object reference. This method is actually not defined by the Document interface, but by the DocumentEvent interface. If an implementation supports the Event module, then the Document object implements the DocumentEvent interface and supports this method.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn