Разбиение div пополам для страницыX

Question

Хорошо, «расщепление» может быть не правильным словом, я хочу один div, если ваша мышь находится в левой половине, чтобы выполнить одну функцию, и если ваша мышь находится справа, выполняют противоположную функцию.

Прежде, чем я установил два дополнительных div в основном div и использовал mouseover для достижения этого, однако мне нужно было поместить z-индекс двух разделительных divs поверх главного 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, который будет содержать позицию мыши, поэтому вы можете сделать быстрое сравнение, чтобы определить, какая половина мыши находится в данный момент, и соответствующим образом распределить ваш код.