How can I detect a click and hold in Coffeescript and then return instead of running what's next?

Question

I have a simple tasks app that has tasks you can check off. In my HTML, each task is an li, and the checkbox is inside the label like this:

<li class="task">
  <label class="left"><input type="checkbox" id="task6">A sample task</label>
  <span class="right drag-handle"></span>
  <span class="priority right" type="priority" priority="minor">minor</span>
</li>

When I click on the label, the checkbox is also triggered. Usually this would be desirable since it makes the checkbox target area much larger, but since you can drag and drop my tasks, I don't want them to be checked off when the user clicks and holds on the label.

This function marks a task as done:

$(document).on 'click', '#task-list li label input', (e) ->

li = $(this).closest('li')

li.slideToggle ->
  Task.markDone(Views.getId(li))

I'd like to add some code at the start of the function that basically says "don't execute the following code if the user has clicked and is holding for longer than 500ms" which would indicate they're dragging a task.

I found a few other StackOverflow answers like this one about detecting click and hold but I can't figure out how to implement it in Coffeescript.

Answer 1

I managed to get it working.

I needed to change the function to use $(document).on 'mousedown'. Ultimately it ended up looking like this, with a little extra code to handle the checkbox being checked or unchecked:

# We'll manage checking the checkbox thank you very much
$(document).on 'click', '.task > label', (e) ->
  e.preventDefault()

# Clicking on the checkbox or label to mark a task as completed
$(document).on 'mousedown', '.task > label', ->
  holding = false

  # If they haven't released the mouse after 250 milliseconds,
  # then they're probably dragging and we don't want to (un)check
  setTimeout (->
    holding = true
  ), 250

  $(this).one 'mouseup', ->
    checkbox = undefined
    unless holding

    # They're not dragging, check the checkbox
    checkbox = $('input', this)
    checkbox.prop 'checked', not checkbox.prop('checked')

    # Get the task li
    li = $(this).closest('li')

    # Slide it up and hide it
    # Use Views.getId(li) to get the task id
    # Then pass it to Task.markDone() to get checked off
    li.slideToggle ->
      Task.markDone(Views.getId(li))