HTML如何在画布元素上拖动时防止意外的页面选择?

扎克·佩尔森

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

如果用户需要,我希望页面上的内容是可选择的,但如果在画布上开始“拖动”,则不希望这样。有没有简单的方法可以做到这一点?

在Firefox和Chrome之间,Firefox似乎默认情况下会处理此问题,但Chrome不会。

海道

简单地阻止默认行为的的mousedown,当它发生在画布上的事件:

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

拖动元素时如何防止页面滚动?

来自分类Dev

何时拖动HTML页面上的选择元素?

来自分类Dev

使用OnsenUI时,如何在拖动图形元素时禁用页面滚动和上拉刷新功能?

来自分类Dev

如何在HTML5中使绘图在画布上可拖动

来自分类Dev

什么时候在HTML页面上拖动选择元素?

来自分类Dev

如何在可拖动的画布上制作矩形?

来自分类Dev

如何在WPF中拖动画布上的按钮

来自分类Dev

如何从画布上拖动图像?

来自分类Dev

如何在画布元素上绘制视频?

来自分类Dev

如何防止HTML元素被下推到页面

来自分类Dev

在Android中滚动页面时如何在画布上显示上一个路径?

来自分类Dev

如何防止在页面加载时显示页面元素

来自分类Dev

如何在 HTML 画布上使颜色透明?

来自分类Dev

防止在鼠标拖动时选择文本

来自分类Dev

在Ag-grid上开始拖动时如何选择行?

来自分类Dev

如何在移动浏览器上拖动元素?

来自分类Dev

选择多个页面时在Excel中创建警告,以防止意外覆盖单元格

来自分类Dev

在画布上对齐HTML元素

来自分类Dev

如何在画布绘制的元素上添加材质样式的阴影?

来自分类Dev

如何在画布元素上添加许多折线?

来自分类Dev

如何在画布绘制的元素上添加材质样式的阴影?

来自分类Dev

如何在页面加载时折叠元素

来自分类Dev

如何在点击时变换分组的画布元素?

来自分类Dev

如何在HTML5画布上使用图像而不在页面上预先放置图像?

来自分类Dev

如何防止拖动时触发滑动事件

来自分类Dev

拖动div时如何防止链接打开?

来自分类Dev

拖动并选择HTML5画布中的文本

来自分类Dev

拖动并选择HTML5画布中的文本

来自分类Dev

滚动时如何在画布上保持绘图?

Related 相关文章

热门标签

归档