当前位置：文档库 › js模拟点击事件

js模拟点击事件

公司项目想要实现一种功能：

单击一个按钮或超链接，然后会出现其他的超链接，这时要让其中的一个超链接被单击，以显示一个初始页面。（公司页面使用了frameset）

很显然，之后的超链接单击事件需要通过JavaScript来触发。

一开始，我想到了用jQuery的click()事件来触发超链接的单击事件（与trigger("click")一样的效果）。结果发现不如人意。

实例如下：

效果图

IE:

FireFox:

Html代码

请单击”Click Me"。测试提交按钮与超链接是否也被单击了。

代码触发超链接

Javascript代码

$(function()

{

$("#btn").click(function()

{

$("#submit").click();

$("#aLink").click();

});

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

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

Javascript代码

$(function()

{

$("#btn").click(function()

{

$("#submit").click();

$("#aLink").get(0).click();

});

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

Javascript代码

var evt = document.createEvent("MouseEvents");

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

按以上方法来实现我想要的功能，代码如下：

Javascript代码

$(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对象。代码如下：

Javascript代码

$(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中显示，然而，通过中的target是无法实现的，因为根本不会执行默认行为，需要通过js来实现。

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

Javascript代码

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

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

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

实际上，下面我要介绍的方法是通用行的。可以替代

window.parent.frames['view'].document.location。代码如下：

Javascript代码

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

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

Html代码

JavaScript模拟用户单击事件——徐新华polaris

请单击”Click Me"。测试提交按钮与超链接是否也被单击了。

代码触发超链接

注意：需要此处需要先绑定一个click处理函数，然后再触发click事件

总结：

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

JS事件挂接(详细)

最近学习了JS挂接事件，根据自己对JS挂接事件的了解，以及自己的实际操作。对相关知识进行了如下总结，希望可以帮到大家。 1、事件挂接的第一种方式：例：//不传递参数 function testBtn1(){ alert(1); alert(this);//this指的是window } //传递参数 function testBtn1(num){ alert(num);//num=100 } //同时挂接多个事件 1.将彻底屏蔽鼠标右键,无右键菜单也可以用于网页中Table框架中

2.取消选取、防止复制 3.不准粘贴 4.防止复制 5.IE地址栏前换成自己的图标

说明：关于favicon.ico文件的制作。你可以先在FW中做一个图片，属于你自己站点一个小图标。然后在ACD see将文件属性改为*.ico，然后将你做的*.ICO 文件传到你的服务器目录中，然后就可以使用以上代码来实现，当别人登陆你的站点时，地址栏里使用的就是你自定义的图标了。很PP哦。 6.可以在收藏夹中显示出你的图标在网页的〈head〉〈/head〉间加入以下语句：〈link rel="shortcuticon" href="http://…/icon.ico"〉即可。其中 icon.ico 为 16x16 的图标文件，颜色不要超过 16 色。说明：制作方法和上面的一样。只是显示的方式不同，这个是在别人收藏你的网页地址时显示的个性图标。也很PP. 7.关闭输入法说明：这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。网页经典代码（二) 8.永远都会带着框架说明：frames.htm为你的网页，这也是保护页面的一种方法 9.防止被人frame 10.网页将不能被另存为

js事件委托

JavaScript中的事件委托传统的事件处理事件委托就是在一个页面上使用一个事件来管理多种类型的事件。这并不是一个新的想法，但对于把握性能来说却很重要。通常情况，你会在web应用程序中看到这样的代码：document.getElementById("help-btn").onclick = function(event){ openHelp(); }; document.getElementById("save-btn").onclick = function(event){ saveDocumen t(); }; document.getElementById("undo-btn").onclick = function(event){ undoChanges (); }; 这种传统的编码方式给每个元素分配单独的事件处理方法。对于交互少的站点来说，这样做是可以的。然而，对于大型的wen应用程序，当存在大量的事件处理的时候，就会显得反应迟钝。这里要关注的不是速度问题，而是内存占用问题。如果有数百个交互，DOM元素和JavaScript 代码就会有数百个关联。 web应用需要占用的内存越多，它的响应速度就越慢。事件委托能将这个问题减小。事件冒泡及捕获要不是事件的下面这些属性，事件委托将成为可能。早期的web开发，浏览器厂商很难回答一个哲学上的问题：当你在页面上的一个区域点击时，你真正感兴趣的是哪个元素。这个问题带来了交互的定义。在一个元素的界限内点击，显得有点含糊。毕竟，在一个元素上的点击同时也发生在另一个元素的界限内。例如单击一个按钮。你实际上点击了按钮区域、body元素的区域以及html元素的区域。

js事件处理

JavaScript组成 ECMAScript：JavaScript语法核心。 DOM：文档对象模型（Document Object Model），提供访问和操作网页内容的方法和接口。 BOM：浏览器对象模型（Browser Object Model），提供与浏览器交互的方法和接口。 JavaScript中有五种简单数据类型，也称为基本数据类型，分别是undefined、null、boolean、number和string。另外还有一种复杂数据类型——object对象类型。JavaScript是基于对象的语言，这意味着程序员既可使用系统自定义的对象，也可使用自己创建的对象。 1 文档的结构和遍历 ParaentNode 获取该节点的父节点 ChildNodes 获取该节点的子节点数组 FirstChild 获取该节点的第一个子节点 LastChild 获取该节点的最后一个子节点 NextSibing 获取该节点的下一个兄弟节点 PreviousSibing 获取该节点上的一个兄弟节点一般地，节点至少拥有nodeType nodeName nodeValue这三个基本属性吗，节点的类型不同，这三个属性的值也不相同NodeType属性类型分别对应1到12的常数值 NodeType 节点的类型 1 元素节点 2 属性节点 3 文本节点 4CDATA节点 5 实体引用名节点 6 实体名称节点 7处理指令节点 8注释节点 9文档节点 10文档类型节点 11 文档片段节点 12 DTD声明节点

网站登陆事件js源代码

1 显示登陆事件时间日期篇--显示登陆时间

时间日期篇--显示登陆时间

js事件说明

JS事件事件 / 描述 onblur 事件发生在窗口失去焦点的时候。 onchange 事件发生在文本输入区的内容被更改，然后焦点从文本输入区移走之后。onclick 事件发生在对象被单击的时候。 onerror 事件发生在错误发生的时候。 onfocus 事件发生在窗口得到焦点的时候。 onload 事件发生在文档全部下载完毕的时候。 onmousedown 事件发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。 onmouseout 事件发生在鼠标离开对象的时候。参考 onmouseover 事件。onmouseover 事件发生在鼠标进入对象范围的时候。 onmouseup 事件发生在用户把鼠标放在对象上鼠标键被按下的情况下，放开鼠标键的时候。 onreset 事件发生在表单的“重置”按钮被单击（按下并放开）的时候。 onresize 事件发生在窗口被调整大小的时候。 onsubmit 事件发生在表单的“提交”按钮被单击（按下并放开）的时候。 onunload 事件发生在用户退出文档（或者关闭窗口，或者到另一个页面去）的时候。onSelect 当Text或Textarea对象中的文字被加亮后，引发该事件。 onFocus 当用户单击Text或textarea以及select对象时，产生该事件。 onBlur 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件. onDragDrog 拖放时发生 onLoseCapture onDblClick 鼠标双击事件 onKeyPress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] onAbort 图片在下载时被用户中断 onBeforeUnload 当前页面的内容将要被改变时触发的事件 onMove 浏览器的窗口被移动时触发的事件

Webkit里js与dom事件处理分析

1.event传递到js 所有的事件都是以WebViewWndProc作为入口点。我们以鼠标事件为例来分析，其它事件基本类似在WebView里又对不同类型的事件处理做了分类主要有鼠标事件：handleMouseEvent 键盘事件：keyDown， keyUp 在EventHandler类里开始对Event进行派发 EventHandler::dispatchMouseEvent 在这里EventHandler 是frame的一个对象，见frame.h文件 mutable EventHandler m_eventHandler; 在EventHandler记录了当前dom树中关于事件的结点所有信息，例如，当前处于鼠标下面的结点，最后处于鼠标下面的结点，最后处于鼠标下面的Scrollbar等。EventHandler里要做的事情就是在有事件发生的时候找到注册了该事件的结点，然后更新这些结点，并调用相应结点的事件处理函数。这些事情是在dom 结点本身结构的支持下完成的，凡是支持事件的dom结点都是继承于EventNode，而所有的dom结点类型都继承与Node。在Node里有这样一个方法dispatchGenericEvent将事件进一步派发到EventTarget在EventTarget里会触发RegisteredEventListener 里注册的结点的事件处理函数对于js事件，到了这一步又有一个js事件的入口点： JSEventListener::handleEvent JSEventListener从其类型的命名可以看出它是一个js事件监听者对象，既然有js事件监听者，那可以想象就有更一般的事件监听者，在webcoe里也确实是这样。上面是从处理事件的流程分析了这个过程，可能大家还会有疑问，事件是怎么派发到js监听者的？下面分析事件监听者注册的过程。在html解析的时候即HTMLParser::parseToken(Token* t)，分析到一个token有事件属性，就会将该属性添加到相应的存储结构里，在这里我们只分析事件属性，在分析到该token有event属性的时候(形容

代码触发超链接 Javascript代码 $(function() { $("#btn").click(function() { $("#submit").click(); $("#aLink").click(); }); }); 当单击：Click Me按钮时，先后弹出提交按钮被单击、超链接被单击的对话框，这表明两者的单击事件都被触发了。然而，从地址栏中可以看到，提交按钮的单击事件触发后，执行了它的默认行为：提交表单；可是超链接的单击事件触发后，并没有链接到目标地址。（不要怀疑说是提交按钮的提交地址对超链接有影响，因为我去掉提交按钮，只留下超链接也不会链接到目标地址。）也许jQuery中的click()方法对超链接的单击事件并没有使其执行浏览器的默认行为（即使你手动加入return true也没有用）。注意：tigger("click")与click()一样的。jQuery 文档中说“这个函数也会导致浏览器同名的默认行为的执行”。同名的？不太明白，但是超链接的确不能执行它的默认行为。这是，只能想另外的方法——抛弃jQuery提供的事件。回到JavaScript自己的事件——click。代码如下： Javascript代码 $(function() { $("#btn").click(function() { $("#submit").click(); $("#aLink").get(0).click(); }); });

js事件

关于丢失键盘焦点的问题 var tf:TextField = new TextField(); tf.text = "请按任意键"; addChild(tf); this.stage.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler); function keydownHandler (evt:KeyboardEvent):void { tf.text = "按键码：" + evt.keyCode; } my_btn.addEventListener(MouseEvent.MOUSE_DOWN, clickHandler); function clickHandler (evt:MouseEvent):void { removeChild(my_btn); } // my_btn为场景中一普通按钮[SampleButton]实例运行效果是这样的：一开始按键是没问题的，tf能正常显示键值然后点一下按钮后，再按键，事件就不响应了经过分析是这么一会事：点击按钮时，焦点在按钮上，按钮消失了，舞台就失去焦点了 function clickHandler (evt:MouseEvent):void { removeChild(my_btn); stage.focus = null; //在这里将焦点回归舞台} 这样设置下焦点就又可以继续响应按键了。但是我想要问的是：如果都是这样的话，屏幕元件多了，岂不句句鼠标点击都要写这么一句么…… 难道没有其它解决办法吗？

https://www.wendangku.net/doc/a07551066.html,/thread-18785-1-1.html JS的event对象 Event属性和方法： 1. type：事件的类型，如onlick中的click； 2. srcElement/target：事件源，就是发生事件的元素； 3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中0代表左键，1代表中间键，2代表右键） 4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和document.body.scrollTop) 5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置； 6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数； 7. altKey,ctrlKey,shiftKey等：返回一个布尔值； 8. keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持event.keycode，可以用event.which替代) 9. fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素； 10. cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于e.stopPropagation();) 11. returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作； (e.returnValue = false; 相当于e.preventDefault();) 12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在 attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素； 13. screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

js鼠标事件大全

J S鼠标事件大全 o n M o u s e O v e r I E3|N2|O3当鼠标移动到某对象范围的上方时触发的事件 o n M o u s e M o v e I E4|N4|O鼠标移动时触发的事件 o n M o u s e O u t I E4|N3|O3当鼠标离开某对象范围时触发的事件 o n K e y P r e s s I E4|N4|O当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] o n K e y D o w n I E4|N4|O当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] o n K e y U p I E4|N4|O当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件事件浏览器支持描述 o n A b o r t I E4|N3|O图片在下载时被用户中断 o n B e f o r e U n l o a d I E4|N|O当前页面的内容将要被改变时触发的事件 o n E r r o r I E4|N3|O捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 o n L o a d I E3|N2|O3页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 o n M o v e I E|N4|O浏览器的窗口被移动时触发的事件 o n R e s i z e I E4|N4|O当浏览器的窗口大小被改变时触发的事件 o n S c r o l l I E4|N|O浏览器的滚动条位置发生变化时触发的事件 o n S t o p I E5|N|O浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 o n U n l o a d I E3|N2|O3当前页面将被改变时触发的事件表单相关事件事件浏览器支持描述 o n B l u r I E3|N2|O3当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] o n C h a n g e I E3|N2|O3当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] o n F o c u s I E3|N2|O3当某个元素获得焦点时触发的事件 o n R e s e t I E4|N3|O3当表单中R E S E T的属性被激发时触发的事件 o n S u b m i t I E3|N2|O3一个表单被递交时触发的事件滚动字幕事件事件浏览器支持描述 o n B o u n c e I E4|N|O在M a r q u e e内的内容移动至M a r q u e e显示范围之外时触发的事件 o n F i n i s h I E4|N|O当M a r q u e e元素完成需要显示的内容后触发的事件 o n S t a r t I E4|N|O当M a r q u e e元素开始显示内容时触发的事件编辑事件事件浏览器支持描述 o n B e f o r e C o p y I E5|N|O当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件 o n B e f o r e C u t I E5|N|O当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件 o n B e f o r e E d i t F o c u s I E5|N|O当前元素将要进入编辑状态 o n B e f o r e P a s t e I E5|N|O内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 o n B e f o r e U p d a t e I E5|N|O当浏览者粘贴系统剪贴板中的内容时通知目标对象 o n C o n t e x t M e n u I E5|N|O当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入o n C o n t e n t M e n u="r e t u r n f a l s e"就可禁止使用鼠标右键了]

js模拟点击事件

请单击”Click Me"。测试提交按钮与超链接是否也被单击了。

请单击”Click Me"。测试提交按钮与超链接是否也被单击了。

JS事件挂接(详细)

js事件委托

js事件处理

网站登陆事件js源代码

时间日期篇--显示登陆时间

js事件说明

Webkit里js与dom事件处理分析

javascript js 鼠标事件大全,js鼠标拖动事件,js鼠标移动事件

.net前台js触发后台事件