Question

我简化了我的页面，这里有我的内容：

<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”超链接标签，里面包含DIV，里面有INPUT和SELECT。

我的目标是什么：当我将文本放入INPUT时，当我从SELECT中选择选项时 - 父A超链接不应该触发。

我试图用“return false”修复它，但看起来这没有帮助。

另外我在Mozilla FF中遇到了一些问题：SELECT没有选择任何值，无论你在列表中选择什么。它始终保留为“选择”

UPD

唯一的问题是FireFox中A-hyperlink内的SELECT行为。我有FF版本3.6.3和行为是当我从SELECT中选择它没有设置为选择。在所有其他浏览器中似乎都能正常工作。

Answer 1

即使我不知道你需要整个<a><div>...构造，在任何情况下你都应该将你的脚本放入ready（）块中，以便在页面加载时执行：< / p>

$(document).ready(function(){

   $('div').click(function(){
        return false;
   });

});

Answer 2

您的方法存在问题：此链接元素中包含所有内容。因此，从理论上讲，浏览器是正确的，假设在此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>

在超链接问题中选择标签

2 个答案: