将鼠标悬停在选择器上时Jquery禁用双击答案

【问题标题】：Jquery disable double click when hovering over selector将鼠标悬停在选择器上时Jquery禁用双击
【发布时间】：2012-10-04 03:09:31
【问题描述】：

当用户双击水平列表时，我有一个功能，该元素被移动到另一个 div。此无序列表中的 li 标签之一是文本输入字段。我只想禁用该特定字段的双击行为。由于输入字段是 ul 元素的一部分，我似乎无法找到一种方法来防止双击该文本框时触发双击事件。这就是我所拥有的。感谢js2coffee.org，我接受了coffeescript或常规javascript的答案:)

如果双击两次，以下代码将水平 ul 元素移动到另一个 div 并返回到原始位置。效果很好。将鼠标悬停在输入字段上时如何暂时禁用它。

$(".available_product_shipments").on "dblclick", ".product", ->
  $(this).appendTo ".product_shipments"
$(".product_shipments").on "dblclick", ".product", ->
  $(this).appendTo ".available_product_shipments"

和 JS 等价物：

$(".available_product_shipments").on("dblclick", ".product", function() {
  $(this).appendTo(".product_shipments");
});

$(".product_shipments").on("dblclick", ".product", function() {
  $(this).appendTo(".available_product_shipments");
});

html的结构是这样的

<ul>
  <li class="product">
    <ul>
      <li class="avail_qty_field"><input type="text /></li> #Prevent dblclick here
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
  <li class="product">
    <ul>
      <li class="avail_qty_field"><input type="text /></li> #Prevent dblclick here
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
</ul>

【问题讨论】：

我不知道如何在咖啡脚本中做到这一点，但你只需要做if ($(event.target).is("input")) return;或类似的东西。
@KevinB：将其发布为答案。

标签： javascript jquery coffeescript mouseevent double-click

【解决方案1】：

我不知道如何在咖啡脚本中做到这一点，但你只需要这样做

if ($(event.target).is("input")) return;

或类似的东西。

这是非咖啡版：

$(".available_product_shipments").on("dblclick", ".product", function(e) {
  if ($(e.target).is("input")) return;
  $(this).appendTo(".product_shipments");
});

$(".product_shipments").on("dblclick", ".product", function(e) {
  if ($(e.target).is("input")) return;
  $(this).appendTo(".available_product_shipments");
});

这就是咖啡脚本中的样子

$(".available_product_shipments").on "dblclick", ".product", (e) ->
  return  if $(e.target).is("input")
  $(this).appendTo ".product_shipments"

$(".product_shipments").on "dblclick", ".product", (e) ->
  return  if $(e.target).is("input")
  $(this).appendTo ".available_product_shipments"

【讨论】：

既然你先回答了，我给了你信用。不知道为什么堆栈溢出将您的答案放在底部。
它位于底部，因为首先显示最新答案更有意义，否则您可能不会注意到新答案或修改后的答案。您可以通过点击顶部的“最旧”而不是“活动”来更改它。
@ctilley79 出于好奇，您如何使用coffeescript 将e 参数添加到匿名函数中？

【解决方案2】：

试试这个

$(".available_product_shipments").on("dblclick", ".product", function(e) {
  if( $(e.target.localName === 'input')) return;
  $(this).appendTo(".product_shipments");
});

$(".product_shipments").on("dblclick", ".product", function(e) {
  if( $(e.target.localName === 'input')) return;
  $(this).appendTo(".available_product_shipments");
});

编辑：修正语法

【讨论】：

【解决方案3】：

我不会在事件发生后过滤它，而是使用“not selector”过滤器将其过滤掉。从下面的示例中，我没有在“文本”的输入类型上挂钩事件，而是在“密码”的类型上挂钩。

HTML

<div class="collection">
    <input class="product" type="text" />
    <input class="product" type="password" />
</div>

咖啡

$(".collection").on "dblclick", ".product:not('input[type=text]')", ->
  alert "double clicked"

JsFiddle 在此处查看实际操作：http://jsfiddle.net/anAgent/wQsss/

【讨论】：