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

最新推荐文章于 2021-12-10 15:50:13 发布

weixin_34109408

最新推荐文章于 2021-12-10 15:50:13 发布

阅读量871

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/bearfly1990/blog/134192

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/bearfly1990/blog/134192