javascript - 在 mouseleave 上将交互框放置在 Canvas 顶部

Question

我试图让一个框跟随 mousemove 上的光标。但是，如果

1. 用户点击框
2. 用户鼠标离开周围的div

这是当前设置的样子:

$(function() {
  $(document).mousemove(function(e) {

    // assign the co-ords as vars so 
    var vert = e.pageY;
    var horz = e.pageX;

    // get co -ords for the center of the box
    centx = Math.ceil($('div').width() / 2);
    centy = Math.ceil($('div').height() / 2);

    // checking to see if the cursor is outside the boudries of the box and stoping the circle moving past them
    if (e.pageY + 53 > Math.ceil($('div').height())) var vert = Math.ceil($('div').height() - 47);
    if (e.pageY - 53 < 0) vert = 53;
    if (e.pageX + 53 > Math.ceil($('div').width())) var horz = Math.ceil($('div').width() - 47);
    if (e.pageX - 53 < 0) horz = 53;

    // work out the distance between the cursor and the center of box
    disx = horz - centx;
    disy = vert - centy;

    // work out the scale of the shadow
    sx = -disx * 0.1;
    sy = -disy * 0.1;

    // work out the shadow blur
    b = (Math.abs(sx) + Math.abs(sy)) * 0.5;

    //apply the css
    $('p').css({
      'top': vert - 53,
      'left': horz - 53,
      '-webkit-box-shadow': '#a0a0a0 ' + sx + 'px ' + sy + 'px ' + b + 'px, inset ' + sx + 'px ' + sy + 'px ' + b + 'px #e3e3e3'
    });
  });
});

body {
  padding: 0px;
}
div {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #f0f0f0;
}
p {
  background-color: orange;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
  <p>set the location</p>
</div>

fiddle

Answer 1

编辑

要在单击框后限制移动，只需使用辅助变量:

var cond = false;
$(yourElement).click(function () {
    cond = true;
})

然后，在 mousemove 函数的主体中:

if (cond) return false;

---

您应该使用 Element.getBoundingClientRect 检查鼠标是否在 div 内:

var boundary = document.getElementById("theDiv").getBoundingClientRect()
var vert = e.pageY;
var horz = e.pageX;

if (boundary.top <= vert && vert <= boundary.bottom &&
        boundary.left <= horz && horz <= boundary.right) {
    /* the rest of your code */
}

Element.getBoundingClientRect 返回如下对象:

{
  bottom: 408,
  height: 400,
  left: 8,
  right: 408,
  top: 8,
  width: 400,
}

如果你想使用jQuery，你可以改用

var left = $(item).offset().left
  , top = $(item).offset().top
  , right = left + $(item).width()
  , bottom = top + $(item).height()
  ;

并设置一个类似的if条件。

演示:

$(function() {
  var cond = false;
  $("#theDiv").click(function () {
    cond = true;
  })
  $(document).mousemove(function(e) {
    
    if (cond) return false;
    
    var boundary = document.getElementById("theDiv").getBoundingClientRect()

    // assign the co-ords as vars so 
    var vert = e.pageY;
    var horz = e.pageX;

    if (boundary.top <= vert && vert <= boundary.bottom && boundary.left <= horz && horz <= boundary.right) {

      // get co -ords for the center of the box
      centx = Math.ceil($('div').width() / 2);
      centy = Math.ceil($('div').height() / 2);

      // checking to see if the cursor is outside the boudries of the box and stoping the circle moving past them
      if (e.pageY + 53 > Math.ceil($('div').height())) var vert = Math.ceil($('div').height() - 47);
      if (e.pageY - 53 < 0) vert = 53;
      if (e.pageX + 53 > Math.ceil($('div').width())) var horz = Math.ceil($('div').width() - 47);
      if (e.pageX - 53 < 0) horz = 53;

      // work out the distance between the cursor and the center of box
      disx = horz - centx;
      disy = vert - centy;

      // work out the scale of the shadow
      sx = -disx * 0.1;
      sy = -disy * 0.1;

      // work out the shadow blur
      b = (Math.abs(sx) + Math.abs(sy)) * 0.5;

      //apply the css
      $('p').css({
        'top': vert - 53,
        'left': horz - 53,
        '-webkit-box-shadow': '#a0a0a0 ' + sx + 'px ' + sy + 'px ' + b + 'px, inset ' + sx + 'px ' + sy + 'px ' + b + 'px #e3e3e3'
      });
    }
  });
});

body {
  padding: 0px;
}
div {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #f0f0f0;
}
p {
  background-color: orange;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="theDiv">
  <p>set the location</p>
</div>

fiddle