jquery - 触发鼠标移动并获取坐标

Question

我得到了这个jsfiddle

$('#test').trigger('mousemove', [Handler],{type:'BLUE!'}); 

当我通过触发方法在蓝色方 block 上“鼠标移动”时，我尝试获取红色方 block 的坐标。

这可能吗？

$(function() {
  $("#test").on("mousemove", youCantHandleTheFunc);

  $('#button').click(function() {
    $('#test').trigger('mousemove', {
      type: 'custom mouse move'
    });
  });

  $('#test2').mousemove(function() {
    $('#test').trigger('mousemove', {
      type: 'BLUE!'
    });
  });
});

function youCantHandleTheFunc(e, customE) {
  if (customE != undefined) {
    e = customE;
  }
  $('#result').html(e.type);
  var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";

  $("span:first").text("( event.pageX, event.pageY ) : " + pageCoords);
}

#test {
  width: 100px;
  height: 100px;
  background-color: red;
}
#test2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

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

<p>
  <button type='button' id='button'>touch me to trigger the mousemove event on the block</button>
</p>

<p id='result'></p>

<span>Move the mouse over the div.</span>

Answer 1

尝试替换 document.createEvent() , MouseEvent.initMouseEvent()对于 .trigger()

Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event.

$(function() {
  
  function triggerMouseMove() {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousemove", true, true, window);
    document.getElementById("test").dispatchEvent(e);
  }
  
  $("#test").on("mousemove", youCantHandleTheFunc);

  $('#button').click(function() {
     triggerMouseMove()
  });

  $('#test2').mousemove(youCantHandleTheFunc);


  function youCantHandleTheFunc(e, customE) {
    console.log(e, customE)
   // if (customE != undefined) {
   //   e = customE;
   // }
    $('#result').html(e.type);
    var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";

    $("span:first").text("( event.pageX, event.pageY ) : " + pageCoords);
  }

})

#test {
  width: 100px;
  height: 100px;
  background-color: red;
}
#test2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

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

<p>
  <button type='button' id='button'>touch me to trigger the mousemove event on the block</button>
</p>

<p id='result'></p>

<span>Move the mouse over the div.</span>