选择超链接内的标签问题 [英] Select tag inside hyperlink problem

查看：31 发布时间：2022/1/2 8:45:27 javascript jquery html select hyperlink

本文介绍了选择超链接内的标签问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经简化了我的页面，这里有:

<头><meta http-equiv="content-type" content="text/plain; charset=utf-8"/><title>标题</title><风格>一个 {文字装饰:无；}div 选择 {边距顶部:20px；显示:块；}</风格><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><脚本>$('div').click(function(){返回假；});<身体><a href="#############"><img src="preview_image"/><div><input type="text" value=""/><选择><option value="default" selected>choose</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></选择>

</a>

主要思想是我有一个A"超链接标签，其中包含带有 INPUT 和 SELECT 的 DIV.

我的目标是:当我将文本放入 INPUT 并从 SELECT 中选择选项时 - 不应触发父超链接.

我试图用return false"修复它，但看起来这没有帮助.

此外，我在 Mozilla FF 中遇到了一些问题:SELECT 没有选择您在列表中选择的任何值.它总是保留为选择"

<小时>

UPD

剩下的唯一问题是 FireFox 中 A-超链接内的 SELECT 行为.我有 FF 版本 3.6.3 行为是当我从 SELECT 中选择选项时它没有设置为选择.在所有其他浏览器中似乎都可以正常工作.

解决方案

你的方法的问题:一切都包含在这个链接元素中.因此，理论上，浏览器正确地假设在此 A 标签内单击的任何内容都在单击链接.即使认为这对于某些浏览器可能会有不同的工作方式，并导致您想要的行为，但我怀疑该行为在所有用户代理上是否一致.因此，我不知道如何在不摆脱 A 元素的情况下使这项工作可靠地工作，分别移动 A 元素使其仅围绕图像(这是您想要的行为):

<img src="preview_image"/></a><div><input type="text" value=""/><选择><option value="default" selected>choose</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></选择>

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屋！

查看全文

选择超链接内的标签问题 [英] Select tag inside hyperlink problem

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

选择超链接内的标签问题 [英] Select tag inside hyperlink problem

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭