Crop image with JavaScript works in IE but not in Firefox

Question

Possible Duplicate:
How do we prevent default actions in JavaScript?

In the code below I try to create a zoom feature for Charts. I tested it on IE and it worked but when I try it on Firefox, it seems that the browser doesn't cancel the default action and tries to drag the whole image. I cannot figure out why it does not work!

JsFiddle

<img onmousedown="startDrag" onmousemove="drag" onmouseup="stopDrag" src="ChartImageSource">
MouseDownPosition = null;

startDrag = function (s, e) {
    if (!this.MouseDownPosition && e.which == 1) {
        this.MouseDownPosition = {
            x: e.clientX,
            y: e.clientY
        };
        this.Box = document.createElement("div");
        $(this.Box).attr('id', 'zoomBox').css({ 'border-style': 'solid', 'border-color': 'black', 'border-width': '1px', 'position': 'absolute', 'z-index': '1000', 'left': e.clientX + 'px', 'top': e.clientY + 'px', 'width': '0px', 'height': '0px' });
        $(s).parent().append(this.Box);
    }
};
drag = function (s, e) {
    if (this.MouseDownPosition) {
        e.preventDefault();
        var initX = this.MouseDownPosition.x;
        var initY = this.MouseDownPosition.y;
        var curX = e.clientX;
        var curY = e.clientY;
        var left;
        var top;
        var width;
        var height;
        if (curX - initX >= 0) {
            width = curX - initX + 'px';
            left = initX + 'px';
        } else {
            width = -curX + initX + 'px';
            left = curX + 'px';
        }
        if (curY - initY >= 0) {
            height = curY - initY + 'px';
            top = initY + 'px';
        } else {
            height = -curY + initY + 'px';
            top = curY + 'px';
        }
        $(this.Box).css({ 'width': width, 'height': height, 'left': left, 'top': top });
    }
};
stopDrag = function (s, e) {
    if (this.MouseDownPosition) {
        var initX = this.MouseDownPosition.x;
        var initY = this.MouseDownPosition.y;
        var curX = e.clientX;
        var curY = e.clientY;
        var curOffX = e.offsetX;
        var curOffY = e.offsetY;
        var initOffX = ((curX - initX) ? initX - curX : -(initX - curX)) + curOffX;
        var initOffY = ((curY - initY) ? initY - curY : -(initY - curY)) + curOffY;
        var MinPixX = initOffX <= curOffX ? initOffX : curOffX;
        var MaxPixX = initOffX >= curOffX ? initOffX : curOffX;
        var MinPixY = initOffY <= curOffY ? initOffY : curOffY;
        var MaxPixY = initOffY >= curOffY ? initOffY : curOffY;
        s.parentNode.removeChild(this.Box);
        this.MouseDownPosition = null;
    }
};

I made it work with jQuery: http://jsfiddle.net/tGmYS/3/ – daniatic Jan 11 '13 at 17:28 — daniatic, Jan 11 '13 at 17:28

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

You generally need to return false; from the event handlers to bypass the default action.

Alternatively, jQuery provides preventDefault() and stopPropagation() functions. You'll probably need to call both of them, but IMO that's very verbose and the alternative (return false;) also works when you're not using jQuery.

Further discussion on the alternatives

edited May 23 '17 at 12:12

Community

1
1

answered Jan 07 '13 at 15:17

OrangeDog

36,653
12
122
207

score 1 · Answer 2 · answered Jan 07 '13 at 15:18

1

e.preventDefault(); is not enough. You'll need to call e.stopPropagation();, too.

See: http://www.quirksmode.org/js/events_order.html

answered Jan 07 '13 at 15:18

Christian Kuetbach

15,850
5
43
79

Tried e.stopPropagation() but not working. [JsFiddle](http://jsfiddle.net/3U39E/8/) – daniatic Jan 07 '13 at 16:16

Crop image with JavaScript works in IE but not in Firefox

2 Answers2