Javascript触发A标记的点击事件

2016-02-20 00:53 42 1 收藏

今天图老师小编给大家精心推荐个Javascript触发A标记的点击事件教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

问题:有一个列表,每一个条目都是这篇文章的部分内容,类似这样:

123456789101112
 div class="list" div class ="item"第一篇文章/div div class ="item"第二篇文章/div...../div

而且在每个条目的div的右上角都有一个评论链接,点击就会展开所有的评论,并且显示评论框,这个链接的形式如下:

1
a class="comment-mod" href="#"评论/a

如果用户直接查看文章列表,那么所有的评论以及评论框都是不显示的,但是如果用户通过别的页面比如首页的个人动态直接定位到这篇日志,那么评论就应该全部显示。而列表页和查看单个条目的页面是同一个页面,这就要求我判断一下用户是否定位到该篇日志,如果是,就通过JS来触发 A 标签的点击事件。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

一开始我尝试了一些方法,想当然地以为 A 标签和按钮一样是有 onclick() 事件的,结果发现没有,后来从网上搜了一些资料之后,成功解决了这个问题^_^ 。解决办法是针对 IE 和 FF编写不同的逻辑,部分代码如下:

12345678910111213
var comment = document.getElementsByTagName('a')[0]; if (document.all) { // For IE  comment.click();} else if (document.createEvent) {   //FOR DOM2 var ev = document.createEvent('HTMLEvents'); ev.initEvent('click', false, true); comment.dispatchEvent(ev);}

上面的代码在IE6, IE7 和 FireFox 3 下通过测试。

一点学习心得,记录在此。

参考资料:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160220/1632761.html

延伸阅读
标签: Web开发
本节稍稍深入地讨论关于事件处理的话题,如果你对模式、闭包和面向对象等概念还不太理解,不妨暂且等阅读完相关内容之后再回过头来阅读它,相信你会有很大收获。 1 事件处理模式        在程序设计领域,“事件处理”是一种模式,当一个对象受外部影响而改变状态时,通过消息的方式将这个状态改变...
标签: Web开发
事件是可以被JavaScript侦测到的行为。 事件 JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。 事件举例: 鼠标点击  页面或图像载入 ...
标签: Web开发
在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很重要的概念。javascript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果。本文就讨论一下JavaScript中的事件处理,读过之后,您就会知道,很多Ajax框架实现拖动效果的原理了。 一、 IE Event对象 (一)IE Event对象的主要属性和方法 在IE中有一...
标签: Web开发
事件处理概述  事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行...
标签: Web开发
每个JavaScript框架都实现跨浏览器的事件处理,鼓励你摆脱旧式的内联附加事件而使用精简的线性方法。看看清单6的jQuery例子,使用hover事件高亮显示div元素。 清单6:使用jQuery附加hover事件 $('#the-box').hover(function() {    $(this).addClass('highlight'); }, function() {    $(this).removeClass('highli...

经验教程

608

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部