javascript - HTML 如何防止在 Canvas 元素上拖动时意外选择页面？

Question

我正在尝试构建一个绘画应用程序，但遇到了一个问题，如果您在绘画时拖出 Canvas ，它会选择页面上的内容。

如果用户愿意，我希望可以选择页面上的内容，但如果在 Canvas 上开始“拖动”，则不能选择。有什么简单的方法可以做到这一点吗？

在 Firefox 和 Chrome 之间，Firefox 似乎默认处理此问题，但 Chrome 则不然。

Answer 1

简单prevent the default behavior当 mousedown 事件发生在 Canvas 上时:

const canvas = document.getElementById( 'canvas' );
// We do handle this event
canvas.onmousedown = (e) => { e.preventDefault(); };

canvas.getContext('2d').fillText( 'start a drag from here', 20, 20 );

canvas { border: 1px solid; }

<p>don't select me when drag started from canvas</p>
<canvas id="canvas"></canvas>
<p>don't select me when drag started from canvas</p>