选择超链接问题中的标签 [英] Select tag inside hyperlink problem
问题描述
我简化了我的页面，并在这里显示了我的内容：
< html>
< head>
< meta http-equiv =content-typecontent =text / plain; charset = utf-8/>
< title>标题< / title>
< style>
a {
text-decoration：none;
}
div select {
margin-top：20px;
display：block;
}
< / style>
< script type =text / javascriptsrc =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 =textvalue =/>
< select>
< option value =defaultselected>选择< / option>
< option value =1> 1< / option>
< option value =2> 2< / option>
< option value =3> 3< / option>
< / select>
< / div>
< / a>
< / body>
< / html>
主要思想是我有一个A超链接标签，其中包含带有INPUT的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 =textvalue =/>
< select>
< option value =defaultselected>选择< / option>
< option value =1> 1< / option>
< option value =2> 2< / option>
< option value =3> 3< / option>
< / select>
< / div>
I have simplified my page and here what I have:
<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>
The main idea is that I have a "A" hyperlink tag, inside which is included DIV with INPUT and SELECT inside.
What my goal is: when I put text into INPUT and when I select option from SELECT - the parent A hyperlink should not trigger.
I have tried to fix it with "return false", but looks this is not helping.
Also I have some problem in Mozilla FF: SELECT is not choosing any value whatever you choose there in the list. It is always left as "choose"
UPD
the only problem left is the SELECT behavior inside A-hyperlink in FireFox. I have FF version 3.6.3 And the behavior is when I select option from SELECT it is not set as chosen. In all the rest browsers seem to work correctly.
The problem with your approach: everything is contained in this link element. So theoretically, a browser is right to assume that anything that gets clicked inside this A-tag is clicking the link. Even thought this may work differently for some browsers, and lead to the behaviour you would like, I would doubt that the behaviour is consistent over all user agents. Hence I don't see how there is any way to make this work reliably without getting rid of the A-element, respectively moving the A-element so its only around the image (which is the behaviour you desire):
<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>
这篇关于选择超链接问题中的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
