Question

我想知道，在实施例一Tabbable DIV的下面，我有一个的的onclick 处理程序中定义，但目前还没有的的onkeyup /的onkeydown 处理程序。

然而按压输入具有作为实际点击股利相同的效果。如果我没有密钥处理程序，此功能从何而来？

要进行测试，请先通过单击第一个按钮使Div聚焦，然后从此处开始。

function handleDiv() {
  alert('Clicked');
}

#divClickable {
   border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<button id="btnFocus" onclick="$('#divClickable').focus()">Click to focus DIV Below</button>

<div id="divClickable" tabindex="0" onclick="handleDiv()">This is a test DIV</div>

Answer 1

这是提交按钮的标准行为。这是现代浏览器可访问性要求的一部分，因此，通过键盘浏览Web的用户仍可以使用键盘触发表单元素上的事件。

如果要避免这种情况，一种解决方法是将按钮更改为type="button"，但是请注意，如果您依靠按钮操作提交父form元素，则会产生副作用：

$('#btnFocus').click(function() {
  $('#divClickable').focus();
});

$('#divClickable').click(function() {
  console.log('Clicked');
});

#divClickable {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<button id="btnFocus" type="button">Click to focus DIV Below</button>
<div id="divClickable" tabindex="0">This is a test DIV</div>

请注意在上述我用不显眼的事件处理程序的例子。您不应该使用on*事件属性，因为这是一种不好的做法。

Tabbable DIV上的onclick =“ ..”也可以在没有键事件的情况下在Enter键上激活

1 个答案: