jquery - 为pageX将一个div分成两半

Question

好的，“拆分”可能不是正确的词，我想要一个 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');
    }

});

小提琴

Answer 2

我认为您不能根据元素内的鼠标位置调用不同的处理程序。但是您的处理程序可以传递包含鼠标位置的事件对象，因此您可以进行快速比较以确定鼠标当前位于哪一半并相应地分支您的代码。