超链接添加onclick事件

有三种方法来实现:
1、不设置<a>标签的href属性,只设置onclick属性。在这种处理方式下,通常超链接文本会和正文的文本以相同的形式出现,即不会有默认的下划线。当鼠标放在超链接上也不会显示小手的形状(除非为该超链接设置了CSS)。因此,用户很难知道这是一个可以点击的超链接。

<a onclick="alert('您单击了超链接1')">超链接1</a>


2、将<a>标签的href属性值设置为"#",并设置onclick属性。在这种处理方式下,用户可以很明显地看出哪些文字是超链接。在单击该超链接时,也可以执行onclick属性值中的JavaScript语句,并且不会跳转网页。但是,由于href的属性值为"#",浏览器会自动跳转到当前网页的顶部。如果当前网页内容比较多,浏览器窗口出现下拉滚动条时,可以很明显地看到跳转,而这种跳转往往不是网页设计者想要达到的,很少有情况会用到。

 

<a href="#" onclick="alert('您单击了超链接2')">超链接2</a>


3、在没有为<a>标签设置onclick属性时,如果单击了该超链接,浏览器会加载href属性中的URL。如果href属性值并不是一个URL,而是一个JavaScript语句的话,那么浏览器就会执行该语句。因此,可以直接将JavaScript语句写在<a>标签的href属性值中,让href属性代替onclick属性。在这种处理方式下,既可以响应onclick事件,又可以不让网页跳转。
本人很喜欢这种方法,有一点需要注意的地方:在<a>标签的href属性值中添加JavaScript语句之前,必须要先使用"javascript:"语句来声明href属性值中的语句为JavaScript语句。否则,浏览器会将href属性值中的JavaScript语句当成是URL进行加载。

 

<a href="javascript:alert('您单击了超链接3')">超链接3</a>

版权声明:本文为luanxiyuan原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。