Question

I have a function when a user double clicks a horizontal list, that element is moved to another div. One of the li tags in this unordered list is a text input field. I would like to disable the double click behavior on that particular field only. Since the input field is part of the ul element, I can’t seem to find a way to prevent the double click event from firing when that text box is double clicked. Here’s what I have. I accept answers in coffeescript or regular javascript thanks to js2coffee.org 🙂

The following code moves a horizontal ul element to another div and back to the original if double clicked twice. Works great. How can I temporarily disable it when hovering over the input field.

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

And the JS equivalent:

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

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

The html is structured like this

<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

I don’t know how to do it in coffee script, but you just need to do

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

or something similar.

This is the non-coffescript version:

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

And this is what it looks like in 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"