Question

我想知道是否可以计算鼠标点击左侧或右半部分是否发生鼠标点击：

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

样本： 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

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 4

要获取鼠标位置，可以计算鼠标位置和div偏移之间的差异。然后将它与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 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解决方案 - 加入聚会后期。但是使用我的代码重新做到这一点。在body标签或div上给它ID并调用javascript函数，例如。 ID =＆＃34; TT＆＃34;的onclick =＆＃34; showCoords（事件）＆＃34;

a:link, a:visited {
font-size: 1.5em;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #000000;
letter-spacing: -0.09em;
text-decoration: none;
}

a:active, a:hover {
font-size: 1.5em;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: underline;
letter-spacing: -0.09em;
color: #FF0000;
}

Answer 7

有效的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
    }
  }

确定鼠标点击是否发生在DIV的左半部分或右半部分

7 个答案: