How to differentiate between click and drag/drop event?

Question

I have a problem with element which is both draggable and also has a click event.

$(\'.drag\').mousedown(function() {
    //...
});

$(\'.class\').click(function         


        

Answer 1

I noticed that if the drag event is registered prior to click event then the problem described will not happen. Here is an example code:

This code create the mentioned problem:

        var that = this;
        var btnId = "button_" + this.getId();
        var minView = $("
", {"id":btnId, style:"position:absolute; top:"
            + this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"});
        minView.html(this.getMinimizedTitle());

        minView.click(function expendWidget(event) {
            $("#" + btnId).remove();
            that.element.css({"left":that.options.style.left, "right":that.options.style.right});
            that.element.show();
        });

        minView.draggable();
        minView.on("drag", this.handleDrag.bind(this));

        this.element.parent().append(minView);

this code does not create the problem:

        var that = this;
        var btnId = "button_" + this.getId();
        var minView = $("
", {"id":btnId, style:"position:absolute; top:"
            + this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"});
        minView.html(this.getMinimizedTitle());

        minView.draggable();
        minView.on("drag", this.handleDrag.bind(this));

        minView.click(function expendWidget(event) {
            $("#" + btnId).remove();
            that.element.css({"left":that.options.style.left, "right":that.options.style.right});
            that.element.show();
        });
        this.element.parent().append(minView);