симулировать наведение мыши с помощью JavaScript - PullRequest
Новая
       15

симулировать наведение мыши с помощью JavaScript

0 голосов
/ 11 мая 2018

Я пытаюсь смоделировать наведение мыши с помощью javascript. Вот мой код: 

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <style>
             #chart:hover {
                   background-color: yellow;
             }
      </style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart" onmousemove="showCoords(event)">This is a div</div>
<button>Button</button>
<script>
    $("button").click(function(){
       triggerMouseHover();
    });
    var triggerMouseHover = function(){
        //x, y is coordinate of mouse pointer
        function simulateMouseHover(x, y) {
            var el = document.elementFromPoint(x, y);
            var fireMouseEvent = function (type, x, y) {
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent(type, true, true, window, 1, 0, 0, x, y, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            };
            fireMouseEvent('mousemove', x, y);
            fireMouseEvent('mouseleave', x, y);
        };
        simulateMouseHover(Math.floor((Math.random() * 1260) + 1), (Math.floor(Math.random() * 263) + 1));
    }
    function showCoords(event) {
        console.log ("X: " + event.clientX + " Y: " + event.clientY);
    }

</script>
</body>
</html>

Мой ожидаемый вывод - элемент div изменит цвет фона, как на самом деле событие наведения мыши, с точными координатами (x, y), новыводом является только перемещение мыши к (x, y), а не наведение мыши.Пожалуйста, помогите мне решить это.Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Вы можете попробовать это 

document.getElementById('chart').onmouseover();
0 голосов
/ 11 мая 2018 
<table style="width:300px;height:100px">
  <tr>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')"
        style="background-color:Khaki">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')"
        style="background-color:PaleGreen">
    </td>
    <td onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')"
        style="background-color:Silver">
    </td>
  </tr>
</table>

может быть, эта работа ..

...