JavaScript 模拟用户单击事件

所属分类: 网络编程 / JavaScript 阅读数: 1364
收藏 0 赞 0 分享
一开始,我想到了用jQuery的click()事件来触发超链接的单击事件(与trigger("click")一样的效果)。结果发现不如人意。

实例如下:
效果图
IE:

FireFox:
 

复制代码 代码如下:

<h3>请单击”Click Me"。测试提交按钮与超链接是否也被单击了。</h3>
    <button id="btn">Click Me</button>
    <form action="#">
        <input type="text" name="userName" value="徐新华-polaris" readonly/>
        <input id="submit" type="submit" value="别点击此按钮提交" onclick="alert('触发了提交按钮的单击事件!');"/>
    </form>
    <a id="aLink" href="http://www.google.cn" onclick = "alert('触发了超链接的单击事件!');">代码触发超链接</a>

复制代码 代码如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();
        $("#aLink").click();
    });
});

当单击:Click Me按钮时,先后弹出提交按钮被单击、超链接被单击的对话框,这表明两者的单击事件都被触发了。然而,从地址栏中可以看到,提交按钮的单击事件触发后,执行了它的默认行为:提交表单;可是超链接的单击事件触发后,并没有链接到目标地址。(不要怀疑说是提交按钮的提交地址对超链接有影响,因为我去掉提交按钮,只留下超链接也不会链接到目标地址。)

也许jQuery中的click()方法对超链接的单击事件并没有使其执行浏览器的默认行为(即使你手动加入return true也没有用)。注意:tigger("click")与click()一样的。jQuery文档中说“这个函数也会导致浏览器同名的默认行为的执行”。同名的?不太明白,但是超链接的确不能执行它的默认行为。这是,只能想另外的方法——抛弃jQuery提供的事件。

回到JavaScript自己的事件——click。代码如下:
复制代码 代码如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();
        $("#aLink").get(0).click();
    });
});

在IE中一测试,通过了……有点兴奋。可是,在fireFox中却提示:click()不是一个function。说真的,IE浏览器提供的东西对开发人员来说很好,而fireFox却没有,比如之前说到的onpropertychange等。不过,我们必须的考虑IE之外的浏览器。在网上查资料,有不少人提到在fireFox中要用代码触发一个事件,需要如下处理:
复制代码 代码如下:

var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);// 或用initMouseEvent(),不过需要更多参数
$("#aLink").get(0).dispatchEvent(evt);

按以上方法来实现我想要的功能,代码如下:
复制代码 代码如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();

        if($.browser.msie)
        {
            $("#aLink").get(0).click();
        }
        else
        {
            var evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            $("#aLink").get(0).dispatchEvent(evt);
        }
    });
});

这时,在IE中是完全正常的。然而,在fireFox中的情况与直接使用jQuery的click()事件一样,能触发单击事件,超链接却没有转到目标地址(注意:提交按钮用此方法也是能够提交的,我想jQuery的click()的实现大概是这样实现的吧)。哎,觉得还是IE好。呵呵。

如此一来,这种方法仍然不能解决FireFox中的问题。得继续寻找其他方法。

既然在fireFox中能够触发单击事件,却不能转到超链接的目标地址,那么,可以用js来实现跳转,即:使用location对象。代码如下:
复制代码 代码如下:

$(function()
{
    $("#btn").click(function()
    {
        $("#submit").click();

        if($.browser.msie)
        {
            $("#aLink").get(0).click();
        }
        else
        {
            // 绑定单击事件
            $("#aLink").click(function()
            {
                document.location = $(this).attr("href");// window.location = $(this).attr("href");也可以,但是执行的时间不同
            });

            // 触发单击事件
            $("#aLink").click();
        }
    });
});

这样就大功告成。有一个地方要说明一下:document.location与window.location。这两个都可以,然而他们的执行时间不同,window的执行时间较早。读者可以自己试试。

虽然实现了这个例子,然而,运用到项目中却出问题了,因为项目中使用了frameset(虽然现在很多人不建议使用frameset,但项目用了也没办法,得这样做)。因此需要指定链接的目标url在哪个frame中显示,然而,通过<a>中的target是无法实现的,因为<a>根本不会执行默认行为,需要通过js来实现。

我们知道,document代表当前的页面(当前执行元素所在页面)。如果我们能够找到当前超链接的url希望放入的frame,我们就可以找到它对象的document。当然找到超链接url希望放入的frame很容易,这是由你自己决定将其放到哪的。示例代码如下:
复制代码 代码如下:

window.parent.frames['view'].document.location = $("#aLink").attr("href");

其中,'view'是超链接url希望放入的frame的name或id(最好是id和name命名一样)。建议IE中别用上面的方法,而用前面介绍的click()方法。

现在已经解决了所有的问题。可能还有人会有这种需求:就是在<a>中写上target,如<a target="_blank"></a>之类的。希望按target的要求触发超链接。当然,这是非IE浏览器有的问题。

实际上,下面我要介绍的方法是通用行的。可以替代window.parent.frames['view'].document.location。代码如下:
复制代码 代码如下:

window.open($(this).attr("href"),$(this).attr("target"));

如果没有定义target属性,默认会当成'_blank'处理,这与用户单击超链接的效果不一样。这种方式是跨浏览器的,所以,只需要要用这种方式即可。这时,回到用jQuery+原始JavaScirpt来实现,这时最终、个人认为最好的方法。完整最终代码如下:
复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript模拟用户单击事件——徐新华 polaris</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!-- 引入jQuery -->
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        /**
        * 模拟用户单击事件 处理超链接的问题
        * @author xuxinhua
        */
        $(function()
        {
            $("#btn").click(function()
            {
                $("#submit").click();

                // 绑定单击事件
                $("#aLink").click(function()
                {
                    window.open($(this).attr("href"),$(this).attr("target"));
                });

                // 触发单击事件(会执行所有绑定的单击事件处理函数)
                $("#aLink").click();
            });
        });
    </script>
</head>

<body>
    <h3>请单击”Click Me"。测试提交按钮与超链接是否也被单击了。</h3>
    <button id="btn">Click Me</button>
    <form action="#">
        <input type="text" name="userName" value="徐新华-polaris" readonly/>
        <input id="submit" type="submit" value="别点击此按钮提交" onclick="alert('触发了提交按钮的单击事件!');"/>
    </form>
    <a id="aLink" href="http://www.google.cn" target="_self" onclick = "alert('触发了超链接的单击事件!');">代码触发超链接</a>
</body>

</html>

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript模拟用户单击事件——徐新华 polaris</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 引入jQuery -->
    <script type="text/javascript" src="scripts/jQuery/jquery-1.3.2.js"></script>
    <script type="text/javascript"><!--
        /**
        * 模拟用户单击事件 处理超链接的问题
        * @author xuxinhua
        */
        $(function()
        {
            $("#btn").click(function()
            {
                $("#submit").click();

                // 绑定单击事件
                $("#aLink").click(function()
                {
                    window.open($(this).attr("href"),$(this).attr("target"));
                });

                // 触发单击事件(会执行所有绑定的单击事件处理函数)
                $("#aLink").click();
            });
        });

// --></script>
</head>
<body>
    <h3>请单击”Click Me"。测试提交按钮与超链接是否也被单击了。</h3>
    <button id="btn">Click Me</button>
    <form action="#">
        <input type="text" name="userName" value="徐新华-polaris" readonly/>
        <input id="submit" type="submit" value="别点击此按钮提交" onclick="alert('触发了提交按钮的单击事件!');"/>
    </form>
    <a id="aLink" href="http://www.google.cn" target="_self" onclick = "alert('触发了超链接的单击事件!');">代码触发超链接</a>
</body>
</html>

注意:需要此处需要先绑定一个click处理函数,然后再触发click事件
总结:
网上有一些JavaScript模拟用户单击事件的文章,但是都不全面,总会有这样那样的问题。虽然,我在此列举了众多的方法,觉得基本的问题都应该解决了,然而还是有可能有人遇到新的问题。如果遇到什么问题,可以跟我一起探讨……

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多