时间戳

首页 > 解决方案 > 如何检测点击元素的右半部分和左半部分

javascript - 如何检测点击元素的右半部分和左半部分

问题描述

如何检测.targ元素的右半部分或左半部分是否发生了点击？

$(document).on('click', '.targ', function(e) {
  let targ = $(this);
  let center = targ.width() / 2;
  let x = '???'; // here I need clicked PositionX relative to targ
  if (x > center) {
    console.log('clicked right');
  } else {
    console.log('clicked left');
  }
});
.parent {
  text-align: center;
}

.targ {
  display: inline-block;
  text-align: center;
  background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
  <div class='targ'>LOREM IPSUM</div>
</div>

标签： javascriptjquery

解决方案

您可以从提供给事件处理程序的事件的offsetX和属性中获取元素内单击位置的 X 和 Y 坐标。offsetY然后您可以将其与您计算的中心点进行比较。尝试这个：

$(document).on('click', '.targ', function(e) {
  let center = $(this).width() / 2;
  if (e.offsetX > center) {
    console.log('clicked right');
  } else {
    console.log('clicked left');
  }
});
.parent {
  text-align: center;
}

.targ {
  display: inline-block;
  text-align: center;
  background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="targ">LOREM IPSUM</div>
</div>

推荐阅读