Jquery无法绑定焦点事件[重复]答案

【问题标题】：Jquery Unable to bind focus event [duplicate]Jquery无法绑定焦点事件[重复]
【发布时间】：2019-06-07 23:12:53
【问题描述】：

我使用 javascript 创建了一个元素并尝试绑定焦点/模糊事件，但它没有触发。我怎样才能达到同样的效果？

var parentContainer = document.getElementById('parent');
var container = document.createElement('div');
container.innerHTML = '<p>Hello</p>';
container.style.userSelect = "none";
container.style.MozUserSelect = "none";

parentContainer.appendChild(container);

$(container).focus(function () {
  $(this).css('border', '1px solid')
}).blur(function () {
  $(this).css('border', '')
});

//container.addEventListener('focus',function () {
//  $(this).css('border', '1px solid')
//})
//container.addEventListener('blur',function () {
//  $(this).css('border', '')
//})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='parent'>
  
</div>

【问题讨论】：

您不能在不接受焦点的元素上使用 focus 和 blur。你的意思是mouseover 和mouseout？另外，您应该使用.on("eventname", function 而不是.eventname(function
@freefaller 我想改变焦点元素的边框，并且模糊需要删除它。我猜 mouseover 和 mouseout 在这里行不通。
但是您不能将焦点放在不接受焦点的元素上。您可以专注于<input>、<select> 等...但您不能专注于<div>
@freefaller 从技术上讲，如果你添加一个 tabindex 属性，你可以，但这对 UX 来说不是很好的做法，而且有点 hacky。
@Rory - 我不知道...感谢您提供的信息，我已更正（但我完全同意，这不好）

标签： javascript jquery

【解决方案1】：

为了对 div 应用焦点，您需要将 tabindex 添加到 div。我建议您使用鼠标悬停或悬停来应用或执行任何特定操作，因为焦点属性应该用于输入字段

<div id='parent' tabindex="100">

</div>

【讨论】：