13

我想知道是否可以计算鼠标单击是否发生在 div 元素的左半部分或右半部分：

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


<div>Variable Content</div>

希望有一种方法可以获取相对坐标并将它们与 div 的宽度相关联吗？

4

7 回答 7

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

演示：http: //jsfiddle.net/dirtyd77/QRKn7/1/

希望这可以帮助！如果您有任何问题，请告诉我！

于 2013-03-28T15:32:55.073 回答
3

这应该这样做：

$("div").click(function(e){
    var $div = $(this);
    alert(e.pageX >= ($div.offset().left + $div.width()/2) ? 'clicked right' : 'clicked left');
});
于 2013-03-28T15:32:09.450 回答
3 
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
  }
});
于 2013-03-28T15:32:37.220 回答
2

要获得鼠标在其中的位置，您可以计算鼠标位置与 div 偏移量之间的差异。然后将它与 div 本身的半宽度进行比较，瞧。

编辑

$(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/

于 2013-03-28T15:32:29.850 回答
2

一个有效的 JS 解决方案： 

onClick(e) {
    const clickTarget = e.target;
    const clickTargetWidth = clickTarget.offsetWidth;
    const xCoordInClickTarget = e.clientX - clickTarget.getBoundingClientRect().left;
    if (clickTargetWidth / 2 > xCoordInClickTarget) {
      // clicked left
    } else {
      // clicked right
    }
  }
于 2019-08-15T20:11:12.307 回答
1

小提琴因为你知道 - 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");
    }
});
于 2013-03-28T15:39:14.447 回答
1

PURE JAVASCRIPT 解决方案 - 参加晚会。但最近使用我的代码完成了这项工作。在 body 标签或 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');

        }


    }
于 2015-06-11T21:40:40.070 回答