Trigger MouseMove и получить координаты

Question

Я получил эту jsfiddle

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

, и я пытаюсь получить координаты для красного квадрата, когда я «MouseMove» на синем с помощью метода запуска.

Возможно ли это?

$(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()

Хотя .trigger() имитирует активацию события, в комплекте с синтезируемого объекта события, он не полностью реплицировать naturally- происходящее событие.

$(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>