将div分成两部分用于分页X

Question

好吧，“分割”可能不是正确的词，我想要一个div，如果您的鼠标位于左半部分以执行一个功能，并且如果您的鼠标位于右侧执行相反的功能。

在我在主div中设置两个额外的div并使用鼠标悬停来实现这一点之前，我需要将两个div div的z-index放在主div的顶部。问题是，我需要添加一个点击功能的内部有几个图像的主div（这是一个旋转木马）。

是可以划分主要的div，所以如果鼠标是在一边执行一个动作和相反的一面使用pageX或其他功能？

Answer 1

这是可能的，而不是真的那么难。
刚刚获得相对于文档元素的位置，并减去从元素宽度的一半，并将其与e.pageX，就像这样：

$('#test').on('click', function(e) { 
    var Dleft = $(this).width()/2, 
     Cleft = e.pageX - $(this).offset().left; 

    if (Cleft > Dleft) { 
     $(this).html('You clicked the right half'); 
    }else{ 
     $(this).html('You clicked the left half'); 
    } 

}); 

FIDDLE

Answer 2

我不认为你可以有一个不同的处理程序调用基于元素内的鼠标位置。但是您的处理程序可以通过将包含鼠标位置的event object，因此您可以快速比较以确定鼠标当前处于哪一半，并相应地分支您的代码。