如何限制iPhone点击手势识别到圆形图像内？

.circle-image {
  border-radius: 50%;
  overflow: hidden;
  touch-action: pan-x pan-y;
}

document.querySelector('.circle-image').addEventListener('touchstart', function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.touches[0].clientX - rect.left;
  var y = e.touches[0].clientY - rect.top;
  var r = rect.width / 2;
  var centerX = rect.left + r;
  var centerY = rect.top + r;
  var distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
  if (distance > r) {
    e.preventDefault();
  }
});

var circleImage = document.querySelector('.circle-image');
var hammer = new Hammer(circleImage);
hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammer.on('pan', function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.center.x - rect.left;
  var y = e.center.y - rect.top;
  var r = rect.width / 2;
  var centerX = rect.left + r;
  var centerY = rect.top + r;
  var distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
  if (distance > r) {
    e.preventDefault();
  }
});