Oak Oak - 26 days ago 10
Javascript Question

How can I act on cursor activity originating from mouse clicks and not keyboard actions?

I want to do something when a user moves the cursor to another location via a mouse click, but not do it when it's done via a keyboard action (arrows, pageup/pagedown, home/end).


  • I can't just listen to
    cursorActivity
    since it triggers on both keyboard and mouse actions.

  • I'm not sure I can listen to
    mousedown
    , because it might be the start of something which is not a cursor location change (e.g. selecting, dragging).



What's the best way to catch those mouse-originated cursor movements?

Answer

You could listen to these events:

  • mousedown
  • cursorActivity
  • keydown
  • beforeChange

The cursor was moved by a mouse click if these conditions are met:

  • A cursorActivity event is triggered after a mousedown event
  • No movement key was pressed between the two events
  • No change was made to the content between the two events
  • No text is selected

var movedByMouse = false;

var editor = CodeMirror(document.body);

editor.on("mousedown", function () {
    movedByMouse = true;
});

editor.on("cursorActivity", function () {
    if (movedByMouse) {
        movedByMouse = false;
        if (!editor.getSelection()) {
            console.log("Moved by mouse");
        }
    }
});

editor.on("keydown", function () {
    if (isMovementKey(event.which)) {
        movedByMouse = false;
    }
});

editor.on("beforeChange", function () {
    movedByMouse = false;
});

function isMovementKey(keyCode) {
    return 33 <= keyCode && keyCode <= 40;
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js"></script>

Comments