Как вызвать событие мыши, чтобы DOM объект, который находится позади других в JavaScript? - PullRequest
Новая
       38

Как вызвать событие мыши, чтобы DOM объект, который находится позади других в JavaScript?

0 голосов
/ 27 сентября 2019

Я хочу вызвать событие mousemove js для объекта dom, который находится позади другого, как я могу вызвать событие, игнорируя передний объект?

Я хочу вызвать рисование прямоугольника, я сделал их с помощью jsи div, сначала у меня есть корневой div, который является моей ссылкой на высоту и ширину, затем я хочу использовать события мыши для изменения размера и изменения положения «прямоугольного» div, проблема заключается в том, когда я вызываю событие mousemove для моего «root», чтобы получитьданные о положении мыши и мой прямоугольник лежат впереди, тогда калькулятор сходит с ума, я имел в виду, событие root'.mousemove отменяется, когда моя мышь достигает объекта 'rect', поэтому я хочу, чтобы мой прямоугольник был 'прозрачный », а затем используйте только мои« корневые »обработчики событий, надеюсь, вы сможете понять и помочь. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root">
            <div id="rect">

            </div>
    </div>
    <script>
        var root = document.getElementById('root');
        var rect =document.getElementById('rect');

        root.addEventListener('mousemove',function(e){
            rect.style.width = e.offsetX;
            rect.style.height = e.offsetY;
        });
    </script>
</body>
</html>

Я хочу сделать« прямоугольник »прозрачным для событий мыши js.

Ответы [ 2 ]

0 голосов
/ 27 сентября 2019

Вот пример JS fiddle ( ссылка ).Это работает нормально.При перемещении мыши высота и ширина внутреннего прямоугольника будут меняться.Дайте мне знать, если это то, что вы искали. 

<!DOCTYPE html>
  <html lang="en">
    <head></head>
    <body>
      <div id="root" style="border:1px solid red; height: 100px; width: 100%;">
        <div id="rect" style="border:1px solid gray; min-height: 20px; min-width:10px; margin: 5px;">
        </div>
</div>
<script>
    var root = document.getElementById('root');
    var rect =document.getElementById('rect');

    root.addEventListener('mousemove',function(e){
        rect.style.width = e.offsetX + "px";
        rect.style.height = e.offsetY + "px";
    });
  </script>
 </body>
</html>
0 голосов
/ 27 сентября 2019

Я понял мою проблему, простой способ сделать это - установить указатель-события: нет;в атрибуте "rect" .css или создайте новый селектор css: 

.rect.scaling{
    pointer-events: none;
}
...