相关疑难解决方法(0)

假设我将一个blur函数附加到HTML输入框,如下所示:

<input id="myInput" onblur="function() { ... }"></input>

有没有办法blur在函数内部获取导致事件触发的元素的ID (被点击的元素)？怎么样？

例如,假设我有这样的跨度:

<span id="mySpan">Hello World</span>

如果我在输入元素具有焦点后立即单击跨度,则输入元素将失去焦点.该功能如何知道它mySpan被点击了？

PS:如果跨度的onclick事件发生在输入元素的onblur事件之前,我的问题就会解决,因为我可以设置一些状态值,表明已经点击了一个特定的元素.

PPS:这个问题的背景是我想在外部触发一个AJAX自动完成控件(来自可点击元素)来显示其建议,而不会因为blur输入元素上的事件而立即消失.所以我想检查blur函数是否单击了一个特定元素,如果是,则忽略blur事件.

JavaScript中处理事件的优先顺序是什么？

以下是按字母顺序排列的事件......

1. onabort - 图像的加载被中断
2. onblur - 元素失去焦点
3. onchange - 用户更改字段的内容
4. onclick - 鼠标单击一个对象
5. ondblclick - 鼠标双击一个对象
6. onerror - 加载文档或图像时发生错误
7. onfocus - 元素获得焦点
8. onkeydown - 按下键盘键
9. onkeypress - 按下或按住键盘键
10. onkeyup - 发布键盘键
11. onload - 页面或图像已完成加载
12. onmousedown - 按下鼠标按钮
13. onmousemove - 移动鼠标
14. onmouseout - 鼠标移出元素
15. onmouseover - 鼠标移动到元素上
16. onmouseup - 释放鼠标按钮
17. onreset - 单击重置按钮
18. onresize - 调整窗口或框架的大小
19. onselect - 选择文本
20. onsubmit - 单击提交按钮
21. onunload - 用户退出页面

他们从事件队列中处理了什么顺序？

优先级不是先进先出(FIFO),所以我相信.

我有一个<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>

我有一个容器 div，其中包含许多输入和复选框，我想仅在容器 div 失去焦点时触发 onBlur 事件，而不是在每次其中的任何元素失去焦点时触发 onBlur 事件

<parent onBlur={function}>
  <child>
    <child>
    </child>
  </child>
</parent>

在这样的结构中，我想捕捉父元素是否失去焦点。我想在父 div 之外单击时触发该行为。但是，当我单击子元素时，父元素也会失去焦点。您可以将此结构视为下拉菜单。有没有办法在无状态反应组件内部实现这一点？我不能使用 jquery 或其他库。