Xác định nếu click chuột xảy ra ở nửa bên trái hoặc bên phải của DIV

Question

Tôi đã tự hỏi nếu nó có thể tính toán, nếu một click chuột xảy ra trong nửa trái hoặc bên phải của phần tử div:

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


<div>Variable Content</div> 

Được hy vọng thì sẽ là một cách để có được các tọa độ tương đối và liên kết chúng với chiều rộng của 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/

Hope this helps! Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi!

Answer 2

này nên làm điều đó:

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

Answer 3

Để có được vị trí của chuột bên trong, bạn có thể tính toán sự khác biệt giữa vị trí chuột và div bù đắp. Sau đó so sánh nó với chiều rộng một nửa của div chính nó và voilà.

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

}); 

Bạn có thể kiểm tra xem nó ra ở đây:

http://jsfiddle.net/kZuML/

Answer 4

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

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

Vì vậy, mã đầy đủ sẽ

$("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 vì bạn biết - 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

Giải pháp JAVASCRIPT PURE Tham gia muộn cho bữa tiệc. nhưng recenlty thực hiện điều này bằng cách sử dụng mã của tôi. trên thẻ nội dung hoặc div cung cấp ID và chức năng javascript cuộc gọi, ví dụ: id = "tt" onclick = "showCoords (sự kiện)"

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

     } 


    }