输入字段上的Javascript单击事件答案

【问题标题】：Javascript Click event on input field输入字段上的Javascript单击事件
【发布时间】：2017-07-22 05:03:10
【问题描述】：

在项目列表上绑定点击事件，框不断消失。知道为什么单击事件在 item-list > div 上不起作用。

这个想法是获取被点击的文本（从项目列表中）并将其放在输入字段中？

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');
    $(".item-list div").click(function() {
      var inputValue = $('.input-msg');
      var data = $(this).text();
      inputValue.val(data);
    });
  }).blur(function() {
    $(".item-list").css('display', 'none');
  });
})();

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
  </div>
</div>

【问题讨论】：

您的问题不清楚？你到底想达到什么目的？以及您面临什么问题？
请解释一下您要做什么，因为通过阅读您的代码，我仍然不确定您要做什么。
不要在焦点处理程序中附加点击侦听器，最终每次元素获得焦点时都会添加一个新侦听器。
点击项目列表，不插入文字，点击功能不起作用？还可以在正文单击时隐藏项目列表

标签： javascript jquery html arrays

【解决方案1】：

我想我有你的问题：-

1.删除blur代码。（因为当焦点从输入框出来时，它会立即隐藏 div）

2.将click 放在focus 之外。（只注册一次监听就够了）

3.在click 中执行hide 代码。（如果你想在点击它的文本 div 后隐藏 div）

工作 sn-p：-

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');
    
  });
  $(".item-list div").click(function() {
      var inputValue = $('.input-msg');
      var data = $(this).text();
      inputValue.val(data);
      $('.item-list').hide();
  });
})();
$(document).mouseup(function(e) {
  if (!$(e.target).is('.item-list') && !$(e.target).is('.input-msg')) {
    $('.item-list').hide(1000);
  }
});

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item Two</div>
    <div>This is item Three</div>
    <div>This is item Four</div>
  </div>
</div><br>

【讨论】：

在 div 外部单击时，不会隐藏 div 容器，知道为什么吗？

【解决方案2】：

看看这个。

(function() {
  $(".item-list div").click(function() {
    var inputValue = $('.input-msg');
    var data = $(this).text();
    inputValue.val(data);
    $('.item-list').fadeOut('fast');
  });
  $(".input-msg").focus(function() {
    $(".item-list").fadeIn('fast');        
  })
  $(document).mouseup(function(e) {
    if (!$(e.target).is('.item-list') && !$(e.target).is('.input-msg')) {
      $('.item-list').fadeOut('fast');
    }
  });
})();

.input-wrapper {
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item two</div>
    <div>This is item three</div>
    <div>This is item four</div>
  </div>
</div>

【讨论】：

@webmansa 和 Kira San 为什么又在 $(".item-list div").click(function() { 内部 focus 事件处理程序。每次都在一个元素的焦点上注册一个监听器是非常糟糕的做法。放在外面。我们已经在回答中提到了这一点
@AlivetoDie 感谢您指出这一点，我很着急，并没有注意到。
@KiraSan 现在答案是完美的。所以+1

【解决方案3】：

项目列表消失，因为在输入框触发blur 事件时，列表被清除。我已经注释掉了隐藏列表的代码，并将其向下移动到项目列表click。

我还从blur 处理程序中移动了列表click 处理程序。这将防止单击处理程序一次又一次地挂载。

(function() {
  $(".input-msg").focus(function() {
    $(".item-list").css('display', 'block');

  }).blur(function() {
 
    // THIS IS YOUR ISSUE.
    // We're going to move this line down to the 
    // `item-list` click handler.
    // $(".item-list").css('display', 'none');

  });

  // You want to register this listener once,
  // not every time user focuses on input box.
  $(".item-list div").click(function() {
    var inputValue = $('.input-msg');
    var data = $(this).text();
    inputValue.val(data);
  });

  $('.main-wrapper').children().not('.input-wrapper').click(function(){
    // Hide the item list on body click.
    // This was moved here from the `blur` handler above.
    $(".item-list").css('display', 'none');
  });

})();

.main-wrapper {
  float: left;
  width: 600px;
}
  
.other-wrapper {
 float: left;
 width: 300px;
}

.input-wrapper {
  float: left;
  width: 300px;
}

.item-list {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
<div class="input-wrapper">
  <input type="text" class="input-msg" placeholder="click me">
  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
    <div>This is item one</div>
  </div>
</div>
<div class="other-wrapper">Other stuff.</div>
<div>

【讨论】：

关于模糊，我也想隐藏项目列表？
我的意思是在身体点击时，在项目列表 div 之外隐藏 div 吗？你明白吗？
我想是的，现在就试试吧。

【解决方案4】：

const input = $("input")
const itemList = $(".item-list")
const items = $(".item-list > div")
const overlay = $(".overlay")

addClickTo(input, () => display(itemList, overlay))
addClickTo(items, (e) => {
  const itemText = e.currentTarget.textContent
  setValueOf(input, itemText)
  dontDisplay(itemList, overlay)
})
addClickTo(overlay, () => dontDisplay(itemList, overlay))


// helpers
function dontDisplay(...elements) { elements.forEach((element) => element.style.display = "none") }
function display(...elements) { elements.forEach((element) => element.style.display = "block") }
function $(selector) {
  const matchedElements = document.querySelectorAll(selector)
  return matchedElements && matchedElements.length > 1
  ? matchedElements
  : matchedElements[0]
}
function addClickTo(elements, handler) {
  elements.forEach || (elements = [elements])
  elements.forEach((element) => element.addEventListener("click", handler))
}
function setValueOf(input, text) {
    input.value = text
}

const input = $("input")
const itemList = $(".item-list")
const items = $(".item-list > div")
const overlay = $(".overlay")

addClickTo(input, () => display(itemList, overlay))
addClickTo(items, (e) => {
  const itemText = e.currentTarget.textContent
  setValueOf(input, itemText)
  dontDisplay(itemList, overlay)
})
addClickTo(overlay, () => dontDisplay(itemList, overlay))


// helpers
function dontDisplay(...elements) { elements.forEach((element) => element.style.display = "none") }
function display(...elements) { elements.forEach((element) => element.style.display = "block") }
function $(selector) {
  const matchedElements = document.querySelectorAll(selector)
  return matchedElements && matchedElements.length > 1
  ? matchedElements
  : matchedElements[0]
}
function addClickTo(elements, handler) {
  elements.forEach || (elements = [elements])
  elements.forEach((element) => element.addEventListener("click", handler))
}
function setValueOf(input, text) {
	input.value = text
}

.item-list {
  display: none;
  position: relative;
  cursor: pointer;
}

input {
  position: relative;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="input-wrapper">
  <div class="overlay"></div>
  <input type="text" class="input-msg" placeholder="click me">

  <!-- input msg -->
  <div class="item-list">
    <div>This is item one</div>
    <div>This is item two</div>
    <div>This is item three</div>
    <div>This is item four</div>
  </div>
</div>

https://jsfiddle.net/dvekrebv/6/

【讨论】：