时间戳

首页 > 解决方案 > 在 Tabbable DIV 上的 onclick=".." 也会在没有键事件的情况下在 Enter 键上激活

jquery - 在 Tabbable DIV 上的 onclick=".." 也会在没有键事件的情况下在 Enter 键上激活

问题描述

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

但是，按 Enter 与实际单击 Div 具有相同的效果。如果我没有密钥处理程序，此功能从何而来？

要进行测试，首先通过单击第一个按钮来聚焦 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>

标签： jqueryhtml

解决方案

这是提交按钮的标准行为。它是现代浏览器可访问性要求的一部分，因此通过键盘浏览 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*事件属性，因为它们是不好的做法。

推荐阅读