JavaScript 模拟用户单击事件(2)


$(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="https://www.jb51.net/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>Click Me</button>
    <form action="#">
        <input type="text" value="徐新华-polaris" readonly/>
        <input type="submit" value="别点击此按钮提交"/>
    </form>
    <a href="https://www.google.cn" target="_self" onclick = "alert('触发了超链接的单击事件!');">代码触发超链接</a>
</body>

</html>


复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpdpj.html