Question

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

如果双击两次，以下代码会将水平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>

Answer 1

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

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

或类似的东西。

这是非coffescript版本：

$(".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");
});

这就是它在coffeescript中的样子

$(".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"

Answer 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");
});

编辑：更正语法

Answer 3

我不会在事件发生后对其进行过滤，而是使用“not selector”过滤器对其进行过滤。从下面的例子中，我不是在“text”的输入类型上挂钩事件，而是在“password”类型上。

<强> 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/

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

3 个答案: