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

最新推荐文章于 2022-03-31 22:36:03 发布

原创最新推荐文章于 2022-03-31 22:36:03 发布 · 1.5w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #xhtml #html #javascript #xml

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

本文介绍了使用jQuery处理单击和双击事件的方法，并提供了具体的代码示例。通过这些示例，读者可以了解如何阻止链接默认行为及如何根据点击次数更换图片。

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；处理。