javascript - 选择 div 的特定区域

Question

我使用 2 个名为“左”和“右”的 div 制作了一个轮播，并在其上放置了 mousemove 事件。我想让它上下移动，所以我创建了“顶部”和“底部”，并注意到我无法让它们组合起来以光标移动的方式移动。

因此，我想到了针对容器中的特定区域(即容器 div 的上半部分)，而不是在内部创建 div 来触发特定方向，这样(我认为)我可以完全触发所有这些事件。然而，经过几个小时的研究，我找不到这样做的方法。

我应该如何进行？这是代码:http://jsfiddle.net/pool4/vL5g3/3/

var x=0, 
    y=0,
    rateX=0,
    rateY=0,
    maxspeed=10;
var backdrop = $('.backdrop');

$('.directionx', backdrop).mousemove(function(e){
    var $this = $(this);
    var left = $this.is('.left');
    var right = $this.is('.right');

    if (left){
        var w = $this.width();
        rateX = (w - e.pageX - $this.offset().left + 1)/w;
    }
    else if (right){
        var w = $this.width();
        rateX = -(e.pageX - $this.offset().left + 1)/w;
    }
});
$('.directiony', backdrop).mousemove(function(e){
    var $this = $(this);
    var top = $this.is('.top');
    var bottom = $this.is('.bottom');  

    if (top){
        var h = $this.height();
        rateY = (h - e.pageY - $this.offset().top + 1)/h;
    }
    else if (bottom) {
        var h = $this.height();
        rateY = -(e.pageY - $this.offset().top + 1)/h;
    }
});


backdrop.hover(
    function(){
        var scroller = setInterval( moveBackdrop, 30 );
        $(this).data('scroller', scroller);
    },
    function(){
        var scroller = $(this).data('scroller');
        clearInterval( scroller );
    }
);   

function moveBackdrop(){
    x += maxspeed * rateX;
    y += maxspeed * rateY;
    var newpos = x+'px '+y+'px';
    backdrop.css('background-position',newpos);
}

Answer 1

您的问题是，控制上下移动的 div 放置在控制左右移动的 div 之上，因此后者永远不会收到 mousemove 事件。鼠标事件不会通过层传播，即使它们是透明的。我更改了您的代码和 CSS，因此每个 div 都位于其中一个 Angular 落。为了使事情变得更简单，我使用了 data-* 属性，因此每个 div 控制的方向以声明性方式设置，而不需要更改代码。您会发现代码更加简单(而且还可以进一步简化)。

顺便说一句，您可以在没有额外 div 的情况下实现此目的，只需控制光标所在位置(div 中心的顶部、右侧、左侧或底部)。

backdrop.on('mousemove', '.dir', function(e){
    var $this = $(this);
    var direction = $(e.target).attr('data-direction');
    var left = direction.indexOf('left') > - 1;
    var right = direction.indexOf('right') > - 1;
    var top = direction.indexOf('up') > - 1;
    var bottom = direction.indexOf('down') > - 1;

    if (left){
        var w = $this.width();
        rateX = (w - e.pageX - $this.offset().left + 1)/w;
    }
    else if (right){
        var w = $this.width();
        rateX = -(e.pageX - $this.offset().left + 1)/w;
    }

    if (top){
        var h = $this.height();
        rateY = (h - e.pageY - $this.offset().top + 1)/h;
    }
    else if (bottom) {
        var h = $this.height();
        rateY = -(e.pageY - $this.offset().top + 1)/h;
    }
});

我已经更新了您的fiddle .

编辑在这个新的fiddle中我这样做没有额外的 div:

var w = backdrop.width() / 2;
var h = backdrop.height() / 2;
var center = {
    x: backdrop.offset().left + backdrop.width() / 2,
    y: backdrop.offset().top + backdrop.height() / 2
};

backdrop.on('mousemove', function(e){   
    var offsetX = e.pageX - center.x;
    var offsetY = e.pageY - center.y;

    rateX = -offsetX / w;
    rateY = -offsetY / h;
});

backdrop.hover(
    function(){
        var scroller = $(this).data('scroller');
        if (!scroller) {
            scroller = setInterval( moveBackdrop, 30 );
            $(this).data('scroller', scroller);
        }
    },
    function(){
        var scroller = $(this).data('scroller');
        if (scroller) {
            clearInterval( scroller );
            $(this).data('scroller', null);
        }
    }
);  

如您所见，mousmove 处理程序要简单得多。