Question

我有一个包含HTML（包含画布）的TABBED视图。此画布上有一个侦听器，用于跟踪鼠标的移动。在第一个选项卡上一切正常，但是当我单击第二个选项卡时，鼠标跟踪器不起作用。

由于该元素包含在单独的文件（及其相同组件）中，因此在两个选项卡上均无法正常工作。

我正在使用python flask Web框架

<div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="point" role="tabpanel" aria-labelledby="point-tab">
            <div container>
                <div class="row">
                    <div class="col-md-4">
                        <button type="button" class="btn" id="add-point-coordinates">Add</button>
                        <button type="button" class="btn" id="draw-point-coordinates">Draw</button>
                        <div id="point-coordinate-container">
                        </div>
                    </div>
                     {% include 'canvas.html' %}
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pose" role="tabpanel" aria-labelledby="pose-tab">
            <div container>
                <div class="row">
                    <div class="col-md-4">
                        <button type="button" class="btn" id="add-pose-coordinates">Add</button>
                        <button type="button" class="btn" id="draw-pose-coordinates">Draw</button>
                        <div id="point-coordinate-container">
                        </div>
                    </div>
                     {% include 'canvas.html' %}
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">tab3</div>
    </div>

js

$(document).ready(function(){
    function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      canvas.addEventListener('mousemove', function(evt) {
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + parseInt(mousePos.x) + ',' + mousePos.y;
//        writeMessage(canvas, message);
        $('#mouse-coordinates').text(message)
      }, false);

})

HTML包含文件组件不起作用

0 个答案: