Ustalenie, czy kliknięcie myszą się w lewej lub prawej połowie DIV

Question

Zastanawiałem się, czy to możliwe, aby obliczyć, czy kliknięcie myszą się na lewej lub prawej połowy elementu div:

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


<div>Variable Content</div> 

został nadzieją, że być sposobem uzyskania względnych współrzędnych i powiązania ich z szerokością 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/

Nadzieja to pomaga! Daj mi znać, jeśli masz jakieś pytania!

Answer 2

ten powinien zrobić:

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

Answer 3

Aby uzyskać pozycję myszy wewnątrz, można obliczyć różnicę między położenia myszy i div offsetowego. Następnie porównaj ją z połówkową szerokością samego div i voila.

EDIT

$(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'); 
     } 
    }); 

}); 

Można to sprawdzić tutaj:

http://jsfiddle.net/kZuML/

Answer 4

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

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

Więc pełny kod będzie

$("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 ponieważ wiesz - 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

Rozwiązanie PURE JAVASCRIPT - łączenie późno na imprezę. ale recenlty zrobił to za pomocą mojego kodu. na znaczniku body lub div podaj to ID i wywołanie funkcji javascript np. id = "tt" onclick = "showCoords (event)"

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'); 

     } 


    }