编辑: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();
});
所有变焦内容都可以忽略。我看到它的方式,因为我在每个事件IE上做一个e.preventDefault(),甚至不应该知道用户正在拖动。
任何帮助都会很棒,
乔