JS: How to prevent the default action on images in browsers?

Question

In IE, for example, when you press the left button on an image and keeping it pressed try to move the mouse, the drag n' drop action is taking place; how could I prevent this default action so that doing that way nothing will happen. I am building an image cropper, so you should understand why I need that. I am not much interested in knowing how to do so with help of jQuery or the like. As I study JavaScript, I prefer coding in plain-vanilla JS. It is important for me to learn how to make it cross-browser if there are any differences for such a thing.

Answer 1

Here's one in jQuery:

$("#my_container img").mousedown(function () {
  return false;
});

http://www.google.com/search?q=cross+browser+event+hooking will probably teach you everything you need to know about cross browser event hooking. I don't know how to hook events without a framework, because that's an edge case IMHO. In The Real World (tm), you'll always use a framework.

The core here is that you have to stop the mousedown event from running. This will make drag and drop impossible, if you hook the event on text you won't be able to select that text, and so on.

Answer 2

If you're building an image cropper, you're going to put some kind of overlay on the image, probably a relatively or absolutely positioned div, inside of which you will "draw" a rectangle when the user clicks, holds and drags. This will make it impossible for the user to drag the image itself, so no fix for that is needed.

Even if you do not use an overlay, you are still going to hook the mousedown event - there is no other way to implement a JS cropper as far as I know. Hooking that event will by itself be enough to prevent the browser from initiating a drag and drop action.

Answer 3

Just like August's, but plain JS:

var imgs = document.getElementById("my_container")
                   .getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onmousedown = function () {
        return false;
    };
}

If you want to do it 'new-style', google for 'addEventListener()' (all browsers but...) and 'attachEvent()' (...IE) methods.

Answer 4

I'm using code similar to the following to prevent dragging, which has the advantage of targetting actual drag-related events rather than the generic mousedown (which could conceivably have side-effects). Works in all the mainstream browsers except Opera.

function cancellingEventHandler(evt) {
 evt = evt || window.event;
 if (evt.preventDefault) {
  evt.preventDefault();
 } else if (typeof evt.returnValue !== "undefined") {
  evt.returnValue = false;
 }
 return false;
}

function disableDragging(node) {
 node.ondragstart = cancellingEventHandler;
 node.ondraggesture = cancellingEventHandler;
}

disableDragging( document.getElementById("anImage") );