How to detect click but not drag using jQuery?

Question

I have code that select text when user click the p tag but I don't want to do that when user select the text inside. Is it possible to detect click but without drag?

I have simple code like this:

$('.conteiner').on('click', 'p.xxx', function() {
   $(this).selection();
});

But click is executed even if I drag between mousedown and mouseup. The selection is a plugin that select text using getSelection or Range.

Aramanta

Answer 1

Similar to this: Can you detect "dragging" in jQuery?

You can use mousedown and mouseup to detect whether there was a drag.

 $(function() {
    var isDragging = false;
    $(".conteiner")
    .mousedown(function() {
        $(window).mousemove(function() {
            isDragging = true;
            $(window).unbind("mousemove");
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
        if (!wasDragging) {
            $(this).selection();
        }
    });
  });

Here is the plunker demo: http://embed.plnkr.co/Y7mrOP/

Zamia

I've created a plugin for this (custom event) github.com/jcubic/jquery.draglessClick – Aramanta

Answer 2

Found better way, since I need to detect drag to select text this works better:

var get_selected_text = (function() {
    if (window.getSelection || document.getSelection) {
        return function() {
            var selection = (window.getSelection || document.getSelection)();
            if (selection.text) {
                return selection.text;
            } else {
                return selection.toString();
            }
        };
    } else if (document.selection && document.selection.type !== "Control") {
        return function() {
            return document.selection.createRange().text;
        };
    }
    return function() {
        return '';
    };
})();

self.mouseup(function() {
    if (get_selected_text() === '') {
       // click not drag
    }
});

Aramanta

Answer 3

Type annotated version of the OP's solution for Closure Compiler in Advanced mode

const get_selected_text = (/** @return {function():string} */ function() {
    if (window.getSelection || document.getSelection) {
        return function () {
            const selection = /** @type {function():Object<string,?>} */ (window.getSelection || document.getSelection)();
            if (typeof selection['text'] === "string") {
                return selection['text'];
            } else {
                return selection.toString();
            }
        };
    } else if (document.selection && document.selection.type !== "Control") {
        return function () {
            return document.selection.createRange().text;
        };
    }
    return function () {
        return '';
    };
})();

Dnieper