【问题标题】:Make a link open on double click双击打开链接
【发布时间】:2010-12-30 10:57:53
【问题描述】:

如何使超链接<a>Link</a>成为双击链接:即:双击应该打开链接,单击应该什么都不做。

【问题讨论】:

  • 你可以用 JavaScript 做到这一点:quirksmode.org/js/introevents.html 但如果不是特殊情况,我不建议这样做。用户不习惯双击链接。始终遵循最小意外的原则。
  • 常规单击有问题吗?
  • 只是好奇,用例是什么?表现出不同于其他 99.99% 的网络通常不是一个好主意。
  • 用例:我正在对表格进行内联编辑。当我单击任何 数据时,它应该在该 中打开一个表单。但是客户希望使用双击打开该 中的表单。 数据看起来不像链接,但是当我点击它时,它应该调用一个动作。
  • @Muhammad Zeeshan:好的,这是一个公平的用例。

标签: javascript jquery html


【解决方案1】:

好的,那么,您可以这样做:

HTML:

<a id='golink' href='gosomewhere.html'>Go Somewhere</a>

使用 jQuery 的 JavaScript:

jQuery(function($) {
    $('#golink').click(function() {
        return false;
    }).dblclick(function() {
        window.location = this.href;
        return false;
    });
});

实时副本:

jQuery(function($) {
    $('#golink').click(function() {
        return false;
    }).dblclick(function() {
        window.location = this.href;
        return false;
    });
});
<a id='golink' href='http://stackoverflow.com' target="_blank">Go Somewhere</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

(它不必是一个 ID;您可以使用一个类或其他任何可以让您形成 jQuery 可以处理以连接事物的选择器的东西来做到这一点。)

如果用户禁用了 JavaScript,链接将正常工作。爬虫会正常找到链接,等等。如果用户启用了 JavaScript,则事件处理程序将被连接,并且需要双击。

不过,上面的内容会影响键盘导航,所以你必须处理它:

jQuery(function($) {
    $('#golink').click(function() {
        return false;
    }).dblclick(function() {
        window.location = this.href;
        return false;
    }).keydown(function(event) {
        switch (event.which) {
            case 13: // Enter
            case 32: // Space
                window.location = this.href;
                return false;
        }
    });
});

实时副本:

jQuery(function($) {
    $('#golink').click(function() {
        return false;
    }).dblclick(function() {
        window.location = this.href;
        return false;
    }).keydown(function(event) {
        switch (event.which) {
            case 13: // Enter
            case 32: // Space
                window.location = this.href;
                return false;
        }
    });
});
<a id='golink' href='http://stackoverflow.com' target="_blank">Go Somewhere</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我无法想象这对可访问性有好处,而且我敢打赌上面还没有满足其他事情。全部输入:

但我强烈建议不要在没有非常好的用例的情况下这样做

【讨论】:

  • +1:这是唯一可以在没有 JS 的情况下正常工作的答案。
  • 好吧,根据 OP,没有 JS,它不会正常工作,因为他想要的是他该死的双击 :)
  • 用例:我正在对表格进行内联编辑。当我单击任何 数据时,它应该在该 中打开一个表单。但是客户希望使用双击打开该 中的表单。 数据看起来不像链接,但是当我点击它时,它应该调用一个动作。
  • 没有.preventDefault()(单击)就无法工作。
  • @IvanaG.B. - 它适用于 jQuery,因为 jQuery 事件处理程序中的 return false 表示 preventDefaultstopPropagation。它不在本机 DOM 处理程序中,因为在本机 DOM 处理程序中不是这样。
【解决方案2】:

尝试使用 span 而不是链接。像这样的:

<span ondblclick="window.location='http://www.google.com'" style="color:blue;text-decoration: underline;">Click Here</span>

【讨论】:

  • 虽然这是真的并且可能是更好的方法,但我的回答是他想要的。不明白消极的一面。
  • @Guilherme Oenning:实现 OP 想要的东西有很多更好的方法:虽然他不应该首先实现双击,但如果他想这样做,他应该用&lt;a&gt; 不是 &lt;span&gt;
  • 但是他想要的不应该叫link,更像是一个按钮,所以我用了&lt;span&gt;
  • @Guilherme:“但他想要的不应该叫link,它更像是一个按钮......” 公平点!那么,我不会让它看起来像一个,但这仍然是一个公平的观点。
  • @Oenning:然后使用&lt;button&gt;。 :P
【解决方案3】:

很好的问题,我一直在寻找答案。我想出了这个(在 Chrome 中测试)。将这些属性添加到您的链接:

onclick="return false" ondblclick="location=this.href"

例如

<a onclick="return false" ondblclick="location=this.href" href="http://www.google.com">Google</a>

【讨论】:

  • 显然,如果你想使用“目标”行为,你需要采取额外的步骤,但对于简单的东西,我的工作。
【解决方案4】:

您可以使用 Javascript 来做到这一点:

<a href="#" onclick="javascripot:void(0)" ondblclick="javascript:DoMyWorkFunction()">a:x</a>

【讨论】:

  • 您不要在 DOM0(属性)事件处理程序中使用 javascript:。只有href之类的。
  • 为什么我们不能使用javascript:?
【解决方案5】:

试试这个:

<a ondblclick= "openLink('your_link')">Link</a>

<script>
function openLink(link)
{
   location.href = link;
}
</script>

<a ondblclick="location.href='your_link'">Double click on me</a>

【讨论】:

猜你喜欢
相关资源
最近更新 更多
热门标签