Question

我有一个位于页面中间的元素作为传感器。该元素大于其下面的区域，其中包含链接。我需要能够在鼠标结束/移动传感器时注册，以及点击以下链接。

我已经看过了，但我无法找到适用于我的问题的解决方案，因为我需要这个圆形传感器漂浮在页面中间。

#css
.sensor {
  pointer-events: none; # does not register jquery's mouseenter, but allows the links to be clicked
}

#javascript
$('.sensor').mouseenter(doStuff) #only works if pointer events are enabled

这是一个基本模型的小提琴：

http://jsfiddle.net/3rym41ra/

提前致谢。

Answer 1

我在页面上放置了一个圆形传感器，可以在悬停时更改背景。由于传感器现在是链接的父级，因此所有事件都会冒出来。您可以根据需要单击元素，同时仍然使用传感器的某些区域

＆＃13;

$('body').mousemove(function(e) {

  // We want it circular on page so we take 50% left and 50% top as the middle
  // Cirle has radius = 100px

  var middle = {
    x: $(window).width() / 2,
    y: $(window).height() / 2
  }; // Our middle-point
  var normalize = {
    x: middle.x - e.pageX,
    y: middle.y - e.pageY
  }; // mouse-position relative to the middle
  var radius = 100; // radius

  // some Math
  if (normalize.x * normalize.x + normalize.y * normalize.y < radius * radius) {
    // inside circle
    $('body').css('background', 'red');
  } else {
    // outside
    $('body').css('background', 'white');
  }


})

＆＃13;

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>

＆＃13;

点击元素但检测悬停

1 个答案: