How do I avoid a click event firing after dragging a gridster.js widget with clickable content?

Question

I\'m using Gridster (http://gridster.net/) which able to drag the content inside the li . In my li there is a clickable div.

Answer 1

The problem is that the click event is fired after the mouseup event that is passed to draggable.stop.

You therefore need to briefly trap that click event and stop it propagating, then untrap it once you've finished so people can subsequently click on the item.

You can do this like so (click for working JSFiddle):

$(document).ready(function () {
  // Basic event handler to prevent event propagation and clicks
  var preventClick = function (e) { e.stopPropagation(); e.preventDefault(); };
  $(element).gridster({
    draggable: {
      start: function (event, ui) {
        // Stop event from propagating down the tree on the capture phase
        ui.$player[0].addEventListener('click', preventClick, true);
      },
      stop: function (event, ui) {
        var player = ui.$player;
        setTimeout(function () {
          player[0].removeEventListener('click', preventClick, true);
        });
      }
    }
  });
})

This is a much better solution than the currently accepted answer, because it avoids having a variable with state being set/checked across multiple components/handlers.