Question

这或多或少是页面上的一个图标，当点击它时会做某事，但页面上的图标当前是一个锚点。我可以将其更改为div（所有其余图标在我的UI中都是div），但由于某种原因，以下操作不起作用。

为什么第一次点击没有注册？

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    let URLObj = window.URL || window.webkitURL;
    ev.target.href = URLObj.createObjectURL(blob)
    ev.target.download = "untitled.png";
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>

小动作看到行为： https://jsfiddle.net/udbq3fb7/

Answer 1

通过大量的试验和努力，不使用第三方，这里也是一个有效的答案：

$('#a').click(save);

function save(ev) {
   $('#canvas')[0].toBlob((blob) => {
        let URLObj = window.URL || window.webkitURL;
        let a = document.createElement("a");  
        a.href = URLObj.createObjectURL(blob);
        a.download = "untitled.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
   });
}

小提琴：https://jsfiddle.net/rkqkr47w/

Answer 2

以下是目前情况的演练：

用户点击。
事件将在文档中发送。
EventHandlers解雇[如果有]。
发生默认点击行为[如果未在3中阻止。]。

现在，您的代码尝试做的是通过更改事件处理程序中的<a> href来覆盖click（4.）操作的默认行为（ 3）。

这个技巧通常有效，因为3.发生在4.之前，但在你的情况下，你在3.中调用异步方法，而href只在你的异步回调被调用。

所以你有 ...
3. Canvas.toBlob（回调）
4.发生默认点击行为 ...
ñ。回调触发（更改默认行为）

当你的回调被调用时，你的点击事件已经很久了，更改其href只会在下一次点击时发生。

您可以在此回调中直接调用<a>的{{1}}方法，但这会导致无限循环，除非您删除事件处理程序并重新重新分配，但完全创建一个新的click元素可能会更容易，之后你会删除，甚至更容易使用像FileSaver.js这样的库，这样做可以处理旧浏览器中的一些怪癖。< / p>

＆＃13;

<a>

＆＃13;

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    saveAs(blob, "untitled.png");
  });
}

＆＃13;

将画布保存为blob，然后将blob保存为文件

2 个答案: