如何防止双击时选择 HTML5 画布外部的文本?

2024-04-30

(在我尝试过的每个浏览器中)双击 HTML5 画布会选择紧跟在画布元素后面的任何文本。我更愿意将点击次数限制在画布上。

(注意:我不想完全禁用文本选择(例如,像this https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click):如果双击文本,则应选择该文本。我只是不想让点击声从画布中“泄漏”。)

这可能吗?

Here's 一个简单的页面 http://www.cs.swan.ac.uk/~csandy/canvasClick/这说明了这个问题。


首先请注意,您的画布没有填充页面的宽度,它只有 100 像素宽。宽度和高度画布属性始终解析为像素,因此就 Canvas 标记而言,写入 width="100%" 仅意味着 100 像素。

要回答您的问题,请用 javascript 编写:

//give your canvas an id, I used 'can'    
var canvas = document.getElementById('can');
canvas.onselectstart = function () { return false; }

将不再出现双击文本问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何防止双击时选择 HTML5 画布外部的文本? 的相关文章

随机推荐

  • 在 Windows 7 x64 上的任何源中均找不到 linecache19-0.5.13

    我安装了 Ruby 如果我运行 ruby v I see ruby 1 9 3p125 2012 02 16 i386 mingw32 如果我在我的应用程序目录中运行 rails server output 31mCould not fin
  • 在python中查找文件

    我有一个文件可能位于每个用户计算机上的不同位置 有没有办法实现文件的搜索 我可以传递文件名和目录树进行搜索的方法吗 os walk http docs python org library os html os walk就是答案 这将找到第
  • “找不到模块的声明文件”,typeRoots 文件夹中的自定义声明文件被忽略

    您好 我遇到了 TypeScript 问题 我有以下目录结构 package json 顶级项目 node modules 所有已安装的库 tsconfig json build a generated folder index js 处理
  • 如何使用 Pear Text_wiki

    pear 网站上的文档链接到无法访问的网站 有谁知道可以解释如何使用 Text wiki 包的网站 文章或书籍 mario 的回答虽然简短 但很准确 我也因缺乏 让我们快速入门 文档而感到沮丧 并花了一些时间与源代码进行交流 诚然 这绝不是
  • 与 -webkit-filter 战斗:模糊而不是实心边缘(与过滤器一起使用:模糊)

    我写了这支笔 http codepen io anon pen ByZPxw EDIT 请参阅 Alexander Omara 的这支钢笔 了解我的钢笔的较短版本 http codepen io anon pen rawrog 基本上我们设
  • 将 Java 8 Lambda 函数转换为 Java 7

    嘿 我是编码新手 我已经掌握了 Java 8 的 Lambda 函数 但我正在尝试将我为学校项目编写的一些代码转换为 Java 7 但我无法理解关于如何使这段代码在功能上相同 但在 java 7 中 很抱歉 如果这是一个愚蠢的问题 但我似乎
  • 如何使用Python内置的map和reduce函数计算字符串中的字母频率

    我想使用Python的map和reduce内置函数来计算字符串中字母的频率 谁能提供一些关于我如何做到这一点的见解 到目前为止我所得到的 s the quick brown fox jumped over the lazy dog Map
  • CSS 列,从上到下然后从左到右

    我正在为应用程序构建报纸风格的布局 我的页面分为 8 列 各列应先垂直填充 然后水平填充 如果没有足够的内容来填充页面 则列仍应首先垂直填充 在页面右侧留下空白 目前 它们首先水平填充 在内容下方留下空白 我已经尝试过使用 CSS 列 但它
  • 如何使用 ActiveRecord 获取查询结果中的行和列?

    有没有办法使用 ActiveRecord 执行自定义 SQL 查询并让它返回一个数组数组 其中第一行是列名称 后面的每一行是行数据 我想执行类似的事情 connection select rows with headers SELECT i
  • Edge 中的 Javascript 仅适用于打开的 devtools

    我遇到的问题是 在 MS Edge 中 我的图像映射功能只能部分工作 它由淘汰赛 FW 提供动力 在更大的图像映射上 它不会将整个图像映射注册到视图模型中 因此 图像映射的所有悬停效果和单击样式都会停止工作 然而 这只是大图像地图的问题 还
  • 上传太大文件时显示有意义的错误

    我们对网站上上传的文件大小设置了固定限制 低于默认的 asp net 和 iis 设置的大小 我在 Application BeginRequest 中有一个简单的 catch 设置来捕获这个 它不是 excat 因为它检查 Content
  • Java applet - 以 png 格式保存图像

    我正在创建一个用于制作头像的简单小程序 您可以选择脸部 头发 眼睛等 然后将其作为 png 文件保存到光盘上 简单版本 为了简单起见 没有界面 如下所示 import java awt import java applet import j
  • 使用 Rijndael 加密/解密文件

    我需要传输 xml 文件 并且需要对它们进行加密 我发现一些例子认为我已经接近了 但是当我解密文件时 我最终得到了尾随垃圾字符 有一些关于此的帖子 但我还没有看到任何能真正有帮助的帖子 这是加密和解密代码 private void Encr
  • 检查窗口是否已经打开 window.open

    我有一个 html 页面 在我调用的页面正文中onload调用 javascript 函数打开弹出窗口的事件 这是代码 var newWindow null function launchApplication if newWindow n
  • 如何在matlab中绘制彩色一维直方图

    我有一个一维数组 X 其中包含相关系数的统计数据 我想绘制一个彩色直方图 我使用以下代码 histogram X 10 它可以创建具有单色的直方图 现在我想绘制一个直方图 其中每个条形都有不同的颜色 但 FaceColor 选项只能调整整个
  • 使用线程和 ruby​​ mechanize 安全吗?

    有没有人见过很多这样的错误 Exception Net HTTPBadResponse at usr lib ruby 1 8 net http rb 2022 wrong status line SOME HTML CODE HERE 何
  • 为什么需要在父子组件中多次导入React?

    如果您有已导入的父组件文件React 为什么它的任何渲染的子文件也需要导入 React 这是否只是一种安全措施 以防这些子项被渲染到尚未导入 React 的其他地方 In nodejs每个文件都是一个模块 有自己的变量范围 当您将变量导入文
  • 如何通过服务帐户使用 Terraform `google_app_engine_domain_mapping`?

    我正在尝试使用以下配置通过 Terraform 创建 GCP App Engine 域映射 provider google version 3 36 0 region var region resource google app engin
  • 当我停止我的应用程序后,IntentService 将被终止

    我指的是android 设计注意事项 AsyncTask 与 Service IntentService https stackoverflow com questions 3817272 android design considerat
  • 如何防止双击时选择 HTML5 画布外部的文本?

    在我尝试过的每个浏览器中 双击 HTML5 画布会选择紧跟在画布元素后面的任何文本 我更愿意将点击次数限制在画布上 注意 我不想完全禁用文本选择 例如 像this https stackoverflow com questions 8805