javascript - 在动态链接上调用的最少事件

标签 javascript html events

示例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Dynamic Link</title>
</head>

<body>
    <input type="text" value="http://www.example.com/" id="input">
    <a href="http://www.example.com/" id="link">Linked text</a>
    <script>
        var link = document.getElementById('link'),
            input = document.getElementById('input');
        link.onclick = link.oncontextmenu = link.onmousedown = function () {
            this.href = input.value;
        };
    </script>
</body>

</html>

DEMO

  • onclick:在左键单击和键盘焦点 + 上调用 输入
  • oncontextmenu:在右键单击和键盘上下文菜单上调用
  • onmousedown:在 Firefox/IE 中单击鼠标中键并在链接拖动到地址栏时调用

问题:

  1. 是否有任何其他方法可以导航到链接的 URL - 为了完美的可访问性我忘记介绍了?
  2. 我可以减少事件的数量还是必须全部使用它们?

最佳答案

您可以使用 'onblur' 事件来更改链接的 href。

var link = document.getElementById('link'),
input = document.getElementById('input');
input.onblur = function () {
    link.href = this.value;
};

关于javascript - 在动态链接上调用的最少事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24041976/

相关文章:

javascript - 根据 <span> 值和 &lt;input&gt; 值计算价格

javascript - 为什么 iframe 可以更改来自不同域的父窗口的 URL?

html - CSS 似乎找不到类的问题

c# - 将带有参数的命令附加到 KeyUp 事件

javascript - 同一 React 组件中的多个下拉菜单不起作用

javascript 在点击时不起作用

javascript - 如何让 IntelliJ IDEA 解析 node_modules 目录中的 webpack 需求?

html - 在屏幕中央显示一个图像,高度为 77px;

c# - DebuggerEvents.OnEnterRunMode 事件在 Visual Studio 2012 中不起作用

javascript - 使用 jWYSIWYG 在线编辑器处理事件