是否有一种互补的方式来获得鼠标事件？ [英] Is there a complementary way to get something like mouse events?

问题描述

直接使用jQuery：

如果我有一个固定的盒子（比如一个彩色矩形），我将鼠标移入或移出它，jQuery如果我将鼠标光标移动到方框的边界上，就会给我一些事件。

如果我有一个以编程方式移动的彩色矩形，请说右边，我把鼠标放在盒子的右边然后等待，盒子会在鼠标光标下移动并移过它，但不会产生任何鼠标事件（或者至少是我所知道的鼠标事件）。 / p>

当物体移动并且鼠标光标静止时，有什么方法可以接收与静止物体，移动鼠标光标在语义上相当的东西？

解决方案

尝试创建全局变量来存储当前 pageX ， pageY ;使用 mousemove 附加到窗口的事件设置全局变量;使用步骤属性 .animate（）选项来计算动画元素的当前位置，引用 offsetLeft ， offsetTop ， getBoundingClientRect（）。bottom ;检查与偏移量，元素底部相关的当前鼠标位置。

还可以通过在 mousemove中执行相同检查来补充过程事件处理程序

  var x = 0，y = 0; $（window）.on（mousemove，function（e）{ x = e.pageX; y = e.pageY}）$（div）。animate（{left：window.innerWidth  -  150}，{duration：5000，step：function（）{var l = this.offsetLeft， t = this.offsetTop，b = this.getBoundingClientRect（）。bottom; //如果元素通过鼠标，则将位置记录到`console` if（（x === l || x === l + 1 || x === l  -  1）&& y> t&& y< b）console.log（pageX：，x，pageY：，y，offsetLeft：，l， offsetTop：，t，BoundingClientRect（）。bottom：，b） }}） 

  div {width：100px;身高：100px;背景：橄榄; position：relative;}  

 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< /脚本>< DIV>< / DIV>  

With straightforward usage of jQuery:

If I have a stationary box (say, a colored rectangle), and I move the mouse in or out of it, jQuery gives me events if I move the mouse cursor over the boundary of the box one way or the other.

If I have a colored rectangle that is being programmatically moved, say to the right, and I place the mouse to the right of the box and wait, the box will move under the mouse cursor and move past it, but without generating any mouse events (or at least mouse events that I am aware of).

What, if any, ways are there to receive something semantically comparable to the "stationary object, moving mouse cursor" for when the object is moving and the mouse cursor is stationary?

解决方案

Try creating global variables to store current pageX, pageY ; set global variables utilizing mousemove event attached to window ; use step property of .animate() options to calculate current position of animated element , referencing offsetLeft , offsetTop, getBoundingClientRect().bottom ; check for current mouse position in relation to offsets , bottom of element.

Could also compliment process by performing same check within mousemove event handler

var x = 0,
  y = 0;
$(window).on("mousemove", function(e) {
  x = e.pageX;
  y = e.pageY
})
$("div")
  .animate({
    left: window.innerWidth - 150
  }, {
    duration: 5000,
    step: function() {
      var l = this.offsetLeft,
        t = this.offsetTop,
        b = this.getBoundingClientRect().bottom;
      // if element passes over mouse, log positions to `console`
      if ((x === l || x === l + 1 || x === l - 1) && y > t && y < b)
        console.log("pageX:", x
                    , "pageY:", y
                    , "offsetLeft:", l
                    , "offsetTop:", t
                    , "BoundingClientRect().bottom:", b)
    }
  })

div {
  width: 100px;
  height: 100px;
  background: olive;
  position: relative;
}

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

这篇关于是否有一种互补的方式来获得鼠标事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！