为什么在此处调用 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 而不是 only 使用鼠标导航（可访问性；耶！），但我发现，这样做时，对focus() 的调用会神奇地触发keyup() 事件。 （我知道这一点是因为注释掉对 focus() 的调用，否则会导致所需的行为。）

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

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

---

工作场景

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

破碎的场景

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

Answer 1

所以问题是当你按下回车键时，当你松开键时会触发keyup事件。

这将创建一个如下所示的流程： 1、点击链接（按回车键） 2、链接隐藏 3、将焦点赋予文本输入（此时仍按回车键） 4、释放key（keyup事件被触发）

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

此外，在 keydown 事件中使用与 keyup 事件中相同的代码仍将执行完全相同的操作（即按 Enter 键，隐藏输入并显示链接）。

编辑

https://jsfiddle.net/geyut7uv/

我能找到的唯一可靠的解决方案是创建一个“阻止”变量来“禁用”keydown 事件。仅当单击 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>

Answer 2

这是另一种解决方案。功能上的唯一区别是输入仅在 释放 键时出现并聚焦。它监听keydown 并阻止默认的键盘点击，然后在keyup 事件中执行交换，以便keyup 不会进入输入字段。我已经在 Windows 上的 IE 11、Chrome 和 Firefox 中尝试过。

$(function() {
    $('#edit').hide();

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

    $('#value a')
        .keydown(function(e) { // Prevent default enter click
            if (e.keyCode == 13) {
                e.preventDefault();
                e.stopPropagation();
            }
        }).keyup(function(e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                e.stopPropagation();
                $('#edit').show();
                $('#edit input').focus();
                $('#value').hide();
            }
        });

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

Answer 3

我走上了使用标志updated fiddle-again的路线：

html 保持不变，但 js 发生了一些变化。我添加了一个“valueClicked”变量并将其设置为 false；然后，将其用作 keyup 中的条件，但是，在 keyup 条件检查之后，我重置了标志。

     $(function() { 
var valueClickedFromEnter = false;
$('#edit').hide();
function handleLinkClick(event)
{
         $('#edit').show();
        $('#edit input').focus();
        $('#value').hide();
        valueClickedFromEnter = 
            (event.keyCode && event.keyCode == 13);   
}
$('#value')
    .css('cursor', 'pointer')
    .keydown(handleLinkClick).click(handleLinkClick);

$('#edit input')
    .keyup(function(e) {            
        if (e.keyCode == 13 && !valueClickedFromEnter) {  // <enter>
            $('#value').show();
            $('#edit').hide();
        }
        valueClickedFromEnter = false;
    });

});

这个想法是，每当您从制表符到锚点按 Enter 键时，都会设置标志，检查 keyup，然后重置标志，以便在下一次输入时，条件通过。然后，正常使用它，标志永远不会设置，所以条件仍然通过。

已编辑：根据反馈，clientX 和 clientY 不是跨浏览器解决方案。相反，我使用了一个中间函数来处理锚标记的 keydown 和 click 事件，传递事件对象。然后检查此对象的 keycode 属性，如果是 13，则切换标志。

额外的好处是，使用另一个键（如空格键）也会导致链接切换，如果用户开始输入，它将进入输入。

Answer 4

已更新以修复长按问题。问题很简单，你有一个监听 keyup 的事件，你专门把焦点放在那个元素上，所以它在用户释放键时触发。

更新 #2： 这个应该可以完全工作，具有讽刺意味的是，我不得不反转我最初的更改以在元素隐藏时执行所有操作。

试试这个：

var enterPressed = false;
var enteredExclusion = false;
$(document).ready(function() {
$('#edit').hide();

$('#value')
    .css('cursor', 'pointer')
    .click(function() {
        $('#value').hide();
        $('#edit').show();
            $('#editabletext').focusin(function(e){
                enteredExclusion = true;
            }).focusout(function(e){
                enterPressed = false;
                enteredExclusion = false;
            }).focus();
    });

$('#editabletext')
    .keydown(function(e){
        if (e.keyCode == 13 && !enteredExclusion) {  // <enter>
            console.log('setting true');
            enterPressed = true;
        }
     })
    .keyup(function(e) {
        enteredExclusion = false;
        if (e.keyCode == 13 && (enterPressed  )) {
            $('#value').show();
            $('#edit').hide();
            console.log('setting false - keyup');
            enterPressed = false;
        }
    });
 });

html:

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

Answer 5

我决定在不可见时禁用input 元素，而不是搞乱标志之类的东西。禁用的元素无法获得焦点，因此理论上您不会遇到在元素处于活动状态时 Enter 键仍在出现的问题。

当在input 元素中按下 Enter 键时，我还明确地将焦点设置到锚点。这可确保在禁用该元素之前焦点不再位于该元素上，这可能会导致问题。

请注意，我只在 Windows 8.1 上的 Chrome 42（哦，还有 FF 36 和 IE 11）中对此进行了测试，所以是 YMMV。

$(function() {
  $('#edit').hide();

  var keyupHandler = function(e) {
    if (e.keyCode === 13) { // <enter>
      $('#value').show().focus();
      $('#edit').hide().find('input').prop('disabled', true);
    }
  };

  var clickHandler = function(e) {
    $('#value').hide();
    $('#edit').show(500, function() {
      $(this).find('input').prop('disabled', false).focus();
    });
    e.preventDefault();
  };

  $('#value').on('click', clickHandler);
  $('#edit').on('keydown', 'input', keyupHandler);

});

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

Answer 6

发生的事情似乎如下：

1) 用户在焦点元素上按下 enter -> 这将触发 click 事件以及 keyup 事件。先触发点击事件。

2) 点击#value 的处理程序将被调用。此处理程序显示#edit 字段并将焦点设置在该字段上。

3) keyup 事件被触发。但由于现在焦点位于#edit，因此将针对该字段触发（！）

4) 将调用#edit 上的keyup 处理程序并再次隐藏#edit 字段。