CODEWITHSUNDEEP
javascriptjquerycoffeescriptmouseeventdouble-click
ctilley79
ctilley79

Reputation: 2195

Jquery disable double click when hovering over selector

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>

Upvotes: 1

Views: 729

Answers (3)

Sushanth --
Sushanth --

Reputation: 55750

Try this

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

edit:corrected syntax

Upvotes: 2

Kevin B
Kevin B

Reputation: 95066

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"

Upvotes: 2

anAgent
anAgent

Reputation: 2780

Rather than filtering the event after it happens, I would filter it out using the "not selector" filter. From the example below, I'm not hooking an event on the input type of "text", but am on the type of "password".

HTML

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

Coffee

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

JsFiddle See it in action here: http://jsfiddle.net/anAgent/wQsss/

Upvotes: 0

Related Questions