javascript - 单击时捕获 div

Question

我想在我有多个具有相同类名的 div 的环境中使用 jquery 和 HTML2Canvas 库单击它时捕获 div 元素。

这是一个控制台页面，我想在该页面上为用户提供一个额外的选择来捕获或不捕获 div，每个人都不要在意我正在使用的事件监听器。

$('.panel.panel-default', this).one("mouseenter", function() {
  html2canvas(document.getElementsByClassName("panel panel-default")).then(canvas => {
    //document.body.appendChild(canvas);
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
    console.log(image);  
    window.location.href = image;
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <a> this is panel one</a><br><br>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-body">
    <a> this is panel two</a><br><br>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-body">
    <a> this is panel three</a><br><br>
  </div>
</div>

实际结果应该是当我点击 this is panel one 时事件会将那个 div 捕获到文件中。

Answer 1

你只需要传递正确的上下文

  $('.panel-body').on("click", function () {
        html2canvas(this).then(canvas => {
            //document.body.appendChild(canvas);
            var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            console.log(image);
            window.location.href = image;
        })
    });