JavaScript 模拟用户单击事件

一开始，我想到了用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模拟用户单击事件的文章，但是都不全面，总会有这样那样的问题。虽然，我在此列举了众多的方法，觉得基本的问题都应该解决了，然而还是有可能有人遇到新的问题。如果遇到什么问题，可以跟我一起探讨……

赞 (0)

相关推荐

  • Android开发技巧之在a标签或TextView控件中单击链接弹出Activity(自定义动作)

    Android开发技巧之在a标签或TextView控件中单击链接弹出Activity(自定义动作)

    在5.2.1节和5.2.2节介绍了<a>标签以及TextView自动识别的特殊文本(网址.电话号.Email等),这些都可以通过单击来触发不同的动作.虽然这些单击动作已经可以满足大多数需要了,但如果读者想在单击链接时执行任意自定义的动作,那么本节的内容非看不可. 现在让我们使用5.2.1节介绍的方法重新查看Html.java文件的内容,随便找一个处理Html标签的方法,例 如,endA方法.该方法用于处理</a>标签.我们会发现在该方法中如下的语句. text.setSpan(ne

  • Android编程开发之TextView单击链接弹出Activity的方法

    Android编程开发之TextView单击链接弹出Activity的方法

    本文实例讲述了Android编程开发之TextView单击链接弹出Activity的方法.分享给大家供大家参考,具体如下: 话不多说直接上码: 核心源码: package com.example.textview4; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.text.SpannableString; import android.tex

  • 鼠标左键单击变双击的解决方法

    偶的罗技鼠标有点问题了,看来是微动开关的问题,从网上找了点资料,有时间了试试. Quote: 把鼠标打开,找到鼠标左按键的微动开关,一个黑色的小盒子卡在电路板上.打开微动开关的方法是用牙签从侧面下方的小洞插入撬开,轻撬微动开关中部的卡子,注意不要盲目乱插,观察一下上面的机关再动手,小心别用力过猛导致塑料上盖损坏.轻轻将微动开关的上盖打开,这时可以看到下面的铜片,铜片如果变型就取下来小心撑回原来的形状,然后装回原处. 用棉花棒蘸上酒精清洗一下铜片,清洗的过程中,用力要均匀,避免铜片移位.一定不要带

  • js修改table中Td的值(定义td的单击事件)

    项目做完,在测试验收时,用户突然提出,可以更改查询结果,便于打印.隐藏工程错误.但是这个时候提要求,比较头痛,后来,想了想还是用前台代码,这样,只要在项目的JS文件中,加入以下几个函数,便可以解决了. 复制代码 代码如下: /* 页面装载时,为每个td增加单击事件,这样,就可以不用对每个页面进行更改. */ function ReWritable() { var tbmian=document.getElementById("tbmain"); for(var i=0;i<tbm

  • Android中button实现onclicklistener事件的两种方式

    复制代码 代码如下: package com.demos; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class GetScreenActivity extends Activity { private Button fi

  • Android编程单击图片实现切换效果的方法

    本文实例讲述了Android编程单击图片实现切换效果的方法.分享给大家供大家参考,具体如下: 新建一个Android项目,命名为FrameLayout 此实例主要操作src文件夹下的MainActivity.Java类文件和res/layout下的activity_main.xml布局文件 1.布局主页面代码activity_main.xml↓ <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android&qu

  • Android按钮单击事件的四种常用写法总结

    很多学习Android程序设计的人都会发现每个人对代码的写法都有不同的偏好,比较明显的就是对控件响应事件的写法的不同.因此本文就把这些写法总结一下,比较下各种写法的优劣,希望对大家灵活地选择编码方式可以有一定的参考借鉴价值. xml文件代码如下: <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_conte

  • extjs 04_grid 单击事件新发现

    EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据) Js代码 复制代码 代码如下: grid.addListener('cellclick',cellclick); function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); //Get the Record var fieldName = grid.getColumnModel().get

  • 三种Android单击事件onclick的实现方法

    onclick事件的定义方法,分为三种,分别为在xml中进行指定方法:在Actitivy中new出一个OnClickListenner():实现OnClickListener接口三种方式. 代码分别如下: 1. xml指定onclick事件,这种方式比较适用于指定的button,能使java代码相对简化一些: xml文件中: <span style="color:#333333;"><Button android:text="Button03" a

  • 用VBS控制鼠标的实现代码（获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击）

    怎么用VBS模拟鼠标左键单击.左键双击.右键单击?-- 网上搜到的答案普遍是VBS无法实现,或者是要用第三方COM(ActiveX?)组件.我对第三方组件是很反感的,使用第三方组件毫无可移植性可言,因为别人的系统中不一定注册了这个组件.我的建议是,尽量不要在VBS代码中调用第三方组件,除非你的程序只是写来自己用.(顺便说一下,也尽量不要用不靠谱的Sendkeys方法,原因不解释) 好了,废话就说这么多,现在说说用VBS控制鼠标的方法.我以前写过一篇<VBS调用Windows API函数>,本以

随机推荐