2

重複の可能性:
JavaScript でデフォルト アクションを防止するにはどうすればよいですか?

以下のコードでは、チャートのズーム機能を作成しようとしています。IE でテストしたところうまくいきましたが、Firefox で試してみると、ブラウザがデフォルトのアクションをキャンセルせず、画像全体をドラッグしようとしているようです。うまくいかない理由がわかりません！

Jsフィドル

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

2 に答える 2

1

通常return false;、イベント ハンドラからデフォルト アクションをバイパスする必要があります。

あるいは、jQuery が提供する関数preventDefault()とstopPropagation()関数。おそらく両方を呼び出す必要がありますが、IMO は非常に冗長であり、代替 ( return false;) は jQuery を使用していない場合にも機能します。

代替案に関するさらなる議論

于 2013-01-07T15:17:47.583 に答える
1

e.preventDefault();十分ではありません。にも電話する必要がありますe.stopPropagation();。

参照: http://www.quirksmode.org/js/events_order.html

于 2013-01-07T15:18:11.273 に答える