將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，因此您可以快速比較以確定鼠標當前處於哪一半，並相應地分支您的代碼。