我已经简化了我的页面，这里是我所拥有的:
<html>
<head>
<meta http-equiv="content-type" content="text/plain; charset=utf-8" />
<title>Title</title>
<style>
a {
text-decoration: none;
}
div select {
margin-top: 20px;
display: block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$('div').click(function(){
return false;
});
</script>
</head>
<body>
<a href="#############">
<img src="preview_image" />
<div>
<input type="text" value="" />
<select>
<option value="default" selected>choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</a>
</body>
</html>
主要思想是我有一个“A”超链接标记，其中包含带有 INPUT 和 SELECT 的 DIV。
我的目标是:当我将文本输入 INPUT 时以及当我从 SELECT 中选择选项时 - 父 A 超链接不应触发。
我尝试用“return false”来修复它，但看起来这没有帮助。
此外，我在 Mozilla FF 中遇到一些问题:无论您在列表中选择什么，SELECT 都不会选择任何值。它始终保留为“选择”
<小时/>UPD
剩下的唯一问题是 FireFox 中 A 超链接内的 SELECT 行为。我有 FF 版本 3.6.3 并且行为是当我从 SELECT 选择选项时它没有设置为所选。在所有其他浏览器中似乎都能正常工作。
最佳答案
您的方法存在问题:所有内容都包含在此链接元素中。因此从理论上讲，浏览器可以正确地假设在此 A 标记内单击的任何内容都是单击链接。即使认为这对于某些浏览器可能会有不同的工作方式，并导致您想要的行为，但我怀疑该行为在所有用户代理上是否一致。因此，我不明白如何在不删除 A 元素的情况下可靠地工作，分别移动 A 元素，使其仅围绕图像(这是您想要的行为):
<a href="#############">
<img src="preview_image" />
</a>
<div>
<input type="text" value="" />
<select>
<option value="default" selected>choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
关于javascript - 选择超链接内的标签问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3078678/