1

编辑：JSFiddle --> http://jsfiddle.net/mcD3h/2/

我编写了一些 javascript 来允许用户在屏幕上平移图像。这在 Chrome、Firefox 和 IE9 中运行良好，但在 IE7 和 IE8 中，拖动鼠标光标会产生一个带有一条线的圆圈。有谁知道为什么？这是一些代码：

        $img.bind('mousedown', function (e) {
            if (e.which == 1) {
                $('body').addClass('mouseIsDown');
                $img.data('leftMouseDownPos', { x: e.offsetX, y: e.offsetY });
                e.preventDefault();
            }
        }).bind('mousemove', function (e) {
            if (e.which == 1) {
                //console.log('mousemove 1');
                var dragFrom = $img.data('leftMouseDownPos');
                if (
                    $('body').is('.mouseIsDown') && // IE Requires this for some reason - cant just rely on dragFrom being undefined
                    dragFrom &&
                    ((dragFrom.x - e.offsetX > 0 && dragFrom.x - e.offsetX > 5) ||
                        (e.offsetX - dragFrom.x > 0 && e.offsetX - dragFrom.x > 5) ||
                        (dragFrom.y - e.offsetY > 0 && dragFrom.y - e.offsetY > 5) ||
                        (e.offsetY - dragFrom.y > 0 && e.offsetY - dragFrom.y > 5))) {
                    // The have dragged more than 5px so it probably isn't by acident
                    //console.log('drag: ' + e.offsetX + ':' + e.offsetY);

                    // Don't allow them to drag the image off screen
                    var newLeft = parseInt($img.css('marginLeft')) + e.offsetX - dragFrom.x;
                    //if (newLeft >= 0 && newLeft <= $img.width() - $img.parent().width())
                    $img.css({ marginLeft: newLeft + 'px' });

                    var newTop = parseInt($img.css('marginTop')) + e.offsetY - dragFrom.y;
                    //if (newTop >= 0 && newTop <= $img.height() - $img.parent().height())
                    $img.css({ marginTop: newTop + 'px' });

                    e.preventDefault();
                }
            }
        }).bind('mouseup', function (e) {
            $img.data('leftMouseDownPos', undefined);
            $('body').removeClass('mouseIsDown');
            switch (e.which) {
                case 1:
                    {
                        // Zoom in on double left click
                        var lastUp = $img.data('lastLeftUp');
                        if (lastUp && Date.now() - lastUp < 500) {
                            zoom($img.data('zoomLevel') + 0.1, e.offsetX, e.offsetY);
                        }
                        $img.data('lastLeftUp', Date.now());
                        break;
                    }
                case 2:
                    {
                        // Reset on middle click
                        $img.removeAttr('style').css({ maxHeight: $(window).height() * 0.98 + 'px' });
                        break;
                    }
                case 3:
                    {
                        // Zoom out on double right click
                        var lastUp = $img.data('lastRightUp');
                        if (lastUp && Date.now() - lastUp < 500) {
                            // Zooping out around a certain point looks weird
                            //zoom($img.data('zoomLevel') - 0.1, e.offsetX, e.offsetY);
                            zoom($img.data('zoomLevel') - 0.1, undefined, undefined);
                        }
                        $img.data('lastRightUp', Date.now());
                        break;
                    }
            }
            e.preventDefault();
        }).bind('contextmenu', function (e) {
            e.preventDefault();
        });

所有缩放的东西都可以忽略。我看到它的方式是因为我在每个事件上都执行 e.preventDefault() IE 甚至不应该知道用户正在拖动。

任何帮助都会很棒，

乔

4

0 回答 0