使用 JavaScript 裁剪图像适用于 IE，但不适用于 Firefox [重复]

Posted 2023-02-25

【中文标题】使用 JavaScript 裁剪图像适用于 IE，但不适用于 Firefox [重复]

【英文标题】：Crop image with JavaScript works in IE but not in Firefox [duplicate]

【发布时间】：2013-01-07 15:14:29

【问题描述】：

可能重复：How do we prevent default actions in javascript?

在下面的代码中，我尝试为图表创建缩放功能。我在 IE 上对其进行了测试，它可以工作，但是当我在 Firefox 上尝试时，似乎浏览器并没有取消默认操作并尝试拖动整个图像。我不知道为什么它不起作用！

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;
    
;

【问题讨论】：

我让它与 jQuery 一起工作：jsfiddle.net/tGmYS/3

【参考方案1】：

e.preventDefault(); 还不够。您也需要致电e.stopPropagation();。

见：http://www.quirksmode.org/js/events_order.html

【讨论】：

尝试了 e.stopPropagation() 但不起作用。 JsFiddle

【参考方案2】：

您通常需要从事件处理程序中return false; 来绕过默认操作。

另外，jQuery 提供preventDefault() 和stopPropagation() 函数。您可能需要同时调用它们，但 IMO 非常冗长，而替代方案 (return false;) 在您不使用 jQuery 时也可以使用。

Further discussion on the alternatives