javascript – blur event.relatedTarget返回null

2019-10-04 16:36:11 阅读：361 来源： 互联网

标签：onblur javascript events lost-focus focusout

我有一个< input type =“text”>字段,当这个字段失去焦点时我需要清除它(这意味着用户点击了页面上的某个地方).但有一个例外.当用户单击特定元素时,不应清除输入文本字段.

我尝试使用event.relatedTarget来检测用户是否点击了某个地方而不是我的特定< div>.

但是正如您在下面的代码段中看到的那样,它根本不起作用. event.relatedTarget总是返回null！

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div class="special">Clicking here should not cause clearing!</div>

解决方法:

简短回答：将tabindex =“0”属性添加到应该出现在event.relatedTarget中的元素.

说明：event.relatedTarget包含获得焦点的元素.问题是你的特定div无法获得焦点,因为浏览器认为这个元素不是按钮/字段或某种控制元素.

以下是默认情况下可以获得焦点的元素：

<a> elements with href attribute specified

<link> elements with href attribute specified

<button> elements

<input> elements that are not hidden

<select> elements

<textarea> elements

<menuitem> elements

elements with attribue draggable

<audio> and <video> elements with controls attribute specified

因此,当onblur发生时,event.relatedTarget将包含上述元素.将不计算所有其他元素,单击它们将在event.relatedTarget中放置null.

但是有可能改变这种行为.您可以将DOM元素“标记”为可以使用tabindex属性获得焦点的元素.以下是标准说法：

The tabindex content attribute allows authors to indicate that an element is supposed to be focusable, whether it is supposed to be reachable using sequential focus navigation and, optionally, to suggest where in the sequential focus navigation order the element appears.

所以这是更正的代码片段：

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div tabindex="0" class="special">Clicking here should not cause clearing!</div>

标签：onblur,javascript,events,lost-focus,focusout
来源： https://codeday.me/bug/20191004/1853546.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – blur event.relatedTarget返回null