確定是否點擊鼠標在DIV

Question

我想知道是否有可能來計算，如果一個鼠標點擊發生在div元素的左邊或右邊一半的左邊或右邊一半發生了：

$("div").click(function(e){ 
// calculate if click happened on left or right half 
}); 


<div>Variable Content</div> 

希望會有是一種獲得相對座標並將它們與div的寬度關聯的方法？

Answer 1

$("div").click(function(e){ 
    var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders 
    var pOffset = $(this).offset(); 
    var x = e.pageX - pOffset.left; 
    if(pWidth/2 > x) 
     $(this).text('left'); 
    else 
     $(this).text('right'); 
}); 

DEMO： http://jsfiddle.net/dirtyd77/QRKn7/1/

希望這有助於！如果您有任何問題，請告訴我！

Answer 2

這應做到：

$("div").click(function(e){ 
    var $div = $(this); 
    alert(e.pageX >= ($div.offset().left + $div.width()/2) ? 'clicked right' : 'clicked left'); 
}); 

Answer 3

內獲得鼠標的位置，就可以計算出鼠標位置和格偏差之間的差異。然後將它與div本身的半寬相比較，並且voilà。

編輯

$(function() 
{ 

    $("#test").click(function(e){ 
     var offset = $(this).offset(); 
     var pos_x = e.pageX - offset.left; 
     var middle = $(this).outerWidth()/2; 

     if(pos_x < middle) 
     { 
      alert('left part'); 
     } 
     else 
     { 
      alert('right part'); 
     } 
    }); 

}); 

您可以點擊此處查看：

http://jsfiddle.net/kZuML/

Answer 4

var x = evt.pageX - $(this).offset().left 

if (x > $(this).width()/2) { 
    //Right half 
} else { 
    //Left half 
} 

所以完整的代碼將

$("div").click(function(e){ 
    // calculate if click happened on left or right half 
    var x = evt.pageX - $(this).offset().left 

    if (x > $(this).width()/2) { 
    //Right half 
    } else { 
    //Left half 
    } 
}); 

Answer 5

Fiddle因爲你知道 - YOLO！

$("#special").on('click', function(e){ 

    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; //You probably don't need Y. Unless you want to know height as well. 

    var width = $(this).width(), 
     where = width/2; 
    if(x > where){ 
     console.log("Click was on the right"); 
    } else { 
     console.log("Click was on the left"); 
    } 
}); 

Answer 6

PURE JAVASCRIPT解決方案 - 遲到參加聚會。但最終用我的代碼完成了這個。 身上的標籤或div給它的ID和調用JavaScript函數，例如。 ID = 「TT」 的onclick = 「showCoords（事件）」

function showCoords(event) { 
     var x = event.clientX; 
     var y = event.clientY; 
    // var coor = "X coords: " + x + ", Y coords: " + y; 
    // document.getElementById("demo").innerHTML = coor; 
     var ele = document.getElementById("tt"); 
     var width = ele.offsetWidth; 
     var height = ele.offsetHeight; 
     var half=(width/2); 
     if(x>half) 
     { 
      alert('right click'); 

     } 
     else 
     { 
      alert('left click'); 

     } 


    }