jQuery中关于超链接click点击事件的注意点

最新推荐文章于 2023-11-21 09:19:40 发布

昆山人在上海

最新推荐文章于 2023-11-21 09:19:40 发布

阅读量1.5w

点赞数 1

分类专栏： Ajax技术文章标签： jquery function xhtml html javascript xml

本文链接：https://blog.csdn.net/kunshan_shenbin/article/details/6187635

版权

Ajax技术专栏收录该内容

103 篇文章 0 订阅

订阅专栏

A.单击事件：

示例代码1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample4</title> <script type="text/javascript" src="./jquery-1.5.min.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ $("img").attr("src","sea.jpg").attr("alt","海"); return false; }); }); </script> </head> <body> <a href="sea.jpg">画像を変更</a> <p><img src="flower.jpg" alt="花" /></p> </body> </html>

使用jQuery追加<a>元素的click事件后，浏览器会自动打开<a>元素的href属性指定的url。

为了回避这个问题，通常使用下面的2个方法。

1.如示例代码中一样，在处理的后面追加return false;

2.把<a>元素的href属性设置成javascript:void(0);

B.双击事件：

示例代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample8</title> <script type="text/javascript" src="./jquery-1.5.min.js"></script> <script type="text/javascript"> $(function(){ $("a").dblclick(function(){ $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text()); }).click(function(){ return false; }); }); </script> </head> <body> <ul> <li><a href="flower.jpg">花</a></li> <li><a href="sea.jpg">海</a></li> <li><a href="Jellyfish.jpg">くらげ</a></li> <li><a href="Building.jpg">建物</a></li> </ul> <p><img src="flower.jpg" alt="花" /></p> </body> </html>

即便在双击事件中追加了return false；也会出现不正常工作的现象，解决的办法是在每次click单击事件中都追加return false；处理。