javascript - 为什么要在此处调用 keyup 处理程序，我可以阻止它吗？

Question

考虑以下 HTML5+Javascript:

$(function() {	
    $('#edit').hide();
	
	$('#value')
		.css('cursor', 'pointer')
		.click(function() {
			$('#edit').show();
			$('#edit input').focus();
			$('#value').hide();
		});
	
	$('#edit input')
		.keyup(function(e) {
			if (e.keyCode == 13) {  // <enter>
				$('#value').show();
				$('#edit').hide();
			}
		});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="value">
	<a href="#">hello</a>
</div>
<div id="edit">
	<input type="text" value="hello" />
</div>

最初，这一切所做的只是捕获文本hello 上的点击事件，将文本替换为输入框。当用户随后点击 Enter 时，新文本将通过 AJAX 保存到服务器，并且输入框再次仅替换为文本。

现在我添加了 a 标签以允许通过 Tab+Enter 导航而不是仅使用鼠标(可访问性；耶!)，但我发现，这样做时，对 focus() 的调用神奇地触发了 keyup() 事件。 (我知道这一点是因为注释掉对 focus() 的调用否则会导致所需的行为。)

结果是 Tab 键和输入文本打开，但随后立即关闭 input 框，就用户而言，根本没有发生任何事情。

为什么 input 的 keyup 处理程序由完全不相关的元素上的 click 事件触发？我怎样才能阻止这种情况发生？

---

工作场景

1. 点击你好
2. hello 消失；出现文本框，里面有插入符号
3. 按回车键
4. 文本框消失； 你好再次出现

中断场景

1. 专注于文档
2. 按 Tab 直到 hello 成为焦点
3. 按回车键
4. hello 消失；出现文本框，里面有插入符号
5. 文本框消失； hello 再次出现……在我有机会做任何事情之前。

Answer 1

所以问题是，当您按下 enter 键时，keyup 事件会在您释放键时触发。

这将创建如下所示的流程: 1、点击链接(按回车键) 2、链接隐藏 3、焦点给文本输入(此时enter键仍被按下) 4、释放键(触发keyup事件)

如果您将事件更改为 keydown，则在链接上按 enter 不会与输入冲突，因为该输入没有焦点。

此外，在 keydown 事件中使用与 keyup 事件中相同的代码仍然会执行完全相同的操作(即按 enter 键，输入隐藏，链接显示)。

编辑

https://jsfiddle.net/geyut7uv/

我能找到的唯一可靠解决方案是创建一个“禁用”按键事件的“阻止程序”变量。仅当单击 keydown 时，我才将其附加到链接。这是通过输入在 keydown 事件上检查的，如果用户按住该键，该输入将立即触发。

只有当回车键 keyup 事件被触发时，我才允许“blocker”变量通过。

理想情况下，我想删除所有全局范围变量，但我找不到一种方法来识别当前正在使用的事件 (keydown)。

<div id="value">
    <a href="#">hello</a>
</div>
<div id="edit">
    <input type="text" value="hello" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var enter_enabled = true;
    $('#edit').hide();

    $('#value')
    .css('cursor', 'pointer')
    .click(function() {
        $('#edit').show();
        $('#edit input').focus();
        $('#value').hide();
    }).keydown(function(e){
        enter_enabled = false;
    });

    $('#edit input')
    .keydown(function(e){
        if(e.keyCode == 13 && enter_enabled){
            $('#value').show();
            $('#edit').hide();
        }
    })
    .keyup(function(e){
        if(e.keyCode == 13){
            enter_enabled = true;
        }
    });
});
</script>