Disable image dragging in FireFox

FireFox 3 has a behaviour where clicking on image (even background image) and moving your mouse will start to drag that image around. Actually, when you drag an image, the browser thinks you want to save it to the desktop, so it starts default dragging action. To disable image dragging in FireFox, you will have to prevent default action on mousedown event for the image. Please try to drag left and right image.

Default behaviour
drag me
Dragging disabled
drag me if you can

<!-- left image (default behaviour) -->
<img src="spider1.png">

<!-- right image (dragging disabled) -->
<img src="spider2.png" onmousedown="if (event.preventDefault) event.preventDefault()">

If you write event.preventDefault() only (without testing), then IE will throw an error. Disabling, or event cancelation is accomplished by calling the Event’s preventDefault method. preventDefault cancels the event if it is cancel-able, without stopping further propagation of the event. If you want to disable dragging for all images on the page, then you can use the following JavaScript code:

// register onLoad event with anonymous function
window.onload = function (e) {
    var evt = e || window.event,// define event (cross browser)
        imgs,                   // images collection
        i;                      // used in local loop
    // if preventDefault exists, then define onmousedown event handlers
    if (evt.preventDefault) {
        // collect all images on the page
        imgs = document.getElementsByTagName('img');
        // loop through fetched images
        for (i = 0; i < imgs.length; i++) {
            // and define onmousedown event handler
            imgs[i].onmousedown = disableDragging;

// disable image dragging
function disableDragging(e) {

Small but useful tips that can save time.

26 thoughts on “Disable image dragging in FireFox”

  1. Works great for firefox, any idea how to do the same thing in IE without throwing script errors?

  2. @Jeff – You can place if (event.preventDefault) before calling event.preventDefault() and IE will not throw any error. Fortunately it’s very easy to write a cross-browser JS code … just test object before using. ;)

  3. @Ingmar – Small JavaScript code is prepared for disabling all image dragging on the page. Hope this addition will be helpful to you.

  4. It seems this also disables right-clicking on images. this may be desirable to some, but I would like to retain that functionality.

  5. Thanks, helps a lot! I have been tryiing to fix this for a drag and drop, but took me an hour to find that my problem was a plug-in…

  6. Thank you for providing this – exactly what I need!

    I’m finding that it doesn’t work in IE8 for some reason though – is it just a conflict on my side or are others having the same issue?

    Also, I’m seeing an ‘evt not defined’ error when I turn on firebug JS error console..

  7. This is a very simple way to do the same thing.

    document.ondragstart = function () { return false; };
  8. @Steve – I tested this code in IE8, FF3.6, Chrome12 and Opera11. None of the browsers didn’t throw any error. Next, this code was written primarily for FireFox. event.preventDefault doesn’t exist in IE8 (and that is why that code doesn’t work in IE8). I read somewhere that preventDefault seems to be supported in IE9. Anyway, please try with don’s solution document.ondragstart

    @don – Your solution looks very elegant. ondragstart mouse event was initially supported only by IE browser familly and now is part of HTML5. So it seems it will cover the most cases … HTML5 Event Attributes
    Thank you!

Leave a Comment