Question

你好我在画布的顶部有情境图像。我需要处理鼠标左手画布除了图像上的鼠标

在图像中黑点需要返回鼠标离开，红点 鼠标不离开 http://s8.postimg.org/abyzh9glh/Untitled2.png

我尝试使用此代码，但它无法正常工作

＆＃13;

    $("#canvas").on("mouseleave", function() {
        if($("#image-on-top").is(':hover')) {
            console.log("mouse is not leave");    
        } else {
            console.log('mouse is leave')    
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="image-on-top" src="http://vignette1.wikia.nocookie.net/dreamworks/images/5/54/Edi-szemekkel-mort.png" style="z-index: 2; position: absolute; top: 300px; left: 100px">
<canvas id="canvas" width="300" height="300" style="border: 1px #000 solid; position: absolute; top: 50px; left: 50px; z-index: 1"></canvas>

＆＃13;

Answer 1

请遵循：

$("#image-on-top")
  .mouseenter(function() {
    console.log("mouse has entered");
  })
  .mouseleave(function() {
   console.log("mouse leaved");
  });

Answer 2

如果你可以删除＆＃34; position：absolute＃34;从图片代码中，以下代码对您有所帮助..

    $("#canvas").on("mouseover", function() {
            console.log("mouse is not leave");    
    }).on("mouseleave", function() {
            console.log("mouse is leave");    
    });

Answer 3

你也可以试试。

编辑：有点澄清，:hover是CSS的一部分，并不是jQuery中的选择器。这就是使用:is

时无效的原因

EDIT2：在图像悬停之前似乎触发了画布鼠标离开。这意味着当jquery执行画布鼠标离开回调时，仍然没有使用hover属性设置图像。所以我稍微改变了我的代码来处理这个顺序的事件。

    $(function(){
  var canvasHover = false;
  var imageHover = false;

  $("#image-on-top").on("mouseenter", function(){
    if (!canvasHover) {
      canvasHover = true;
      console.log("mouse isn't leave");
    }
  });
  $("#image-on-top").on("mouseleave", function(){
    canvasHover = false;
    console.log("mouse is leave");
  });


  $("#canvas").on("mouseleave", function() {
    canvasHover = false;
    console.log("mouse is leave");
  });
  $("#canvas").on("mouseenter", function() {
    canvasHover = true;
  });
});

jquery如何检查mouseleave是否在元素上

3 个答案: