程序员经验分享-hwhale

如何确定文本节点中被点击的字符？

2023-12-01

我可以设置一个事件侦听器来告诉我 HTML 文档中某个位置何时发生鼠标单击。但是，如果单击发生在某些文本上，我需要知道单击发生在文本中的哪个字符上。有没有办法做到这一点？

我能想到一些非常令人讨厌的解决方案。例如，对于文档中的每个字符，我可以将其包装在具有自己的事件的单独元素中。或者，由于我可以知道单击发生在哪个文本节点，因此我可以使用 clientWidth 执行某种计算（基本上类似于模拟文本的渲染），以确定单击发生在哪个字符中。

当然一定有更容易的事情吗？


捕获鼠标事件后，将元素中的文本拆分为两个单独的范围。查看每个跨度的偏移量以确定事件发生在哪个位置。现在将该跨度分成两部分并再次比较。重复此操作，直到获得一个包含单个字符的跨度，该字符的坐标包含鼠标单击的坐标。由于这本质上是二分搜索，因此整个过程将相当快，并且与替代方案相比，跨度总数较低。一旦找到字符，跨度就可以被溶解，所有文本都返回到原始元素。

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

javascript

html

DOM

如何确定文本节点中被点击的字符？ 的相关文章

  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src

  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下

  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som

  • 将div设置为隐藏，延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document

  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal

  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop

  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏？

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下

  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的

  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div

  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器？

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用

  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob

  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不

  • Javascript 纪元时间（以天为单位）

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如

  • 如何更改此 jquery 插件的时区/时间戳？

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28

  • 更改文本输入标签中文本的大小？

    我有一个很大的文本输入框 但我无法更改字体大小

  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成

  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

  • 无效字符错误：“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件

随机推荐

  • 用于求解线性丢番图方程的算法：ax + by = c

    我在这里寻找整数解决方案 我知道它有无数个从第一对解和 gcd a b c 导出的解 然而 我们怎样才能找到第一对解呢 有什么算法可以解决这个问题吗 Thanks Chan 请注意 并不总是有解决方案 事实上 只有一个解决方案 c是的倍数g

  • 关联类型的生命周期绑定被拒绝，尽管它看起来有效

    我有一段无法编译的代码 可以将其简化为以下代码片段 use std error Error use std convert TryFrom A trait that provides methods for parsing data int

  • 在 Bash 函数中使用 getopts

    我想用getopts在我在 bash profile 中定义的函数内 我的想法是我想传递一些标志给这个函数来改变它的行为 这是代码 function t echo getopts a OPTION echo OPTION echo OPTA

  • Tensorflow 2 中 tf.variable 的条件赋值

    对于 numpy 我们有 threshold 3 a np array 1 2 3 4 5 6 a a gt 3 199 a is 1 2 199 199 199 199 如何编写类似的代码tensorflow 2 b tf Variabl

  • Swift、SpriteKit：如何保存场景的整个进度

    我用 GameViewController swift 构建了一个快速游戏 import UIKit import SpriteKit class GameViewController UIViewController override f

  • XMLHttpRequest 上传进度未正确触发

    我正在尝试使用 XMLHttpRequest 发送文件 该文件正在工作 但我的进度监视器不工作 我尝试上传 700KB 文件和 3MB 文件 但遇到了同样的问题 progress 事件触发一次 并且仅触发一次 并且它表示 event loa

  • 如何使用 Google Cloud Vision API 读取一列文本

    我有下一个文档图像 当我尝试将图像转换为文本时 结果是这样的 Top Text Ref Rad Dte Ddo Ejecutivo 76520400300 Banco de Bogot Luz Adriana Bottom Text 问题是

  • Axios，向 Flask 发出 POST 请求

    我尝试使用 axios 向 Flask 服务器发送 POST var config headers Content Type application json Access Control Allow Origin axios post h

  • 静音 3D 触摸 快速操作

    由于新 iPhone 6s 6s 具有新的 3D Touch 功能 我正在尝试向我的应用程序添加一些主屏幕快速操作 我能够实现正常的力流 触摸主屏幕中的应用程序图标 gt 选择可用的快速操作之一 gt 在所有可能的应用程序状态下正确处理它

  • REPL、解释器和编译器之间的关系

    From 维基百科 REPL 通常被误称为 口译员 这是一个用词不当 很多 使用的编程语言 编译 包括字节码 编译 有 REPL 例如 Common Lisp 和 Python From 对此帖子的回复 交互式解释器使用 REPL 一个 口

  • 在 PHP 中动态访问类常量

    我希望能够动态查找常量的值 但使用变量不适用于语法 gives apple banana orange Fatal error Access to undeclared static property Food type 如何动态调用常量

  • 在 AppEngine Python 上使用 Reportlab 生成的 PDF 文档中添加图像文件的正确方法

    我正在尝试使用 App Engine Python 上的 reportlab 生成 PDF 报告 但我不知道如何正确附加图像 图像是静态的 这是我的项目的目录树 这就是我所做的 在 奇帕斯 py 获取图像 im Image static l

  • python脚本的CPU使用率

    是否可以检查简单脚本的CPU使用率 例如 如何获取打印 100 次 hello world 的 CPU 使用率 以百分比表示 目前我正在控制台中获取执行时间 方法是 time p python script py 如果你使用的是 UNIX

  • php 包含文件包含

    我正在一个网站上工作 并被要求包含位于我的 php 脚本上方的文件夹中的文件 问题是那些我被要求包含的 php 文件包含在其中 因此 在调用我的 php 页面时找不到它们引用的文件 处理这种情况的最佳方法是什么 将文件从文件夹 B 包含到文

  • 将客户端证书设置为 Java HTTP 连接中的请求属性？

    我有一个 Java 应用程序 它通过带有 SSL 的套接字连接到另一个 Java 应用程序 因此我的客户端 JVM 已经具有 Djavax net ssl keyStore and Djavax net ssl trustStore属性设置

  • 如何在延迟着色中从光照几何体的内部进行绘制

    我正在尝试使用 OpenGL 和 GLSL 实现延迟着色器 但我在处理光照几何时遇到了问题 这些是我正在采取的步骤 Bind multitarget framebuffer Render color position normal and

  • 访问 Service 中的请求范围 Bean

    我有一颗普通豆 它是 a Scope request 或 b 放置在HttpServletRequest通过过滤器 拦截器 如何在 a 中访问这个 bean Service哪一种是应用程序范围的单例 这样做的原因是 因为我有一个自定义对象R

  • 使用 Heroku 设置 Paperclip Amazon S3

    has attached file image storage gt s3 s3 credentials gt RAILS ROOT config s3 yml path gt style filename 我不知道什么 path gt s

  • 缺少 1 个必需的位置参数：'self'

    这是我的代码 class Email Stuff def init self self emailaddr None self recipaddr None self EmailUser None self EmailPass None d

  • 如何确定文本节点中被点击的字符？

    我可以设置一个事件侦听器来告诉我 HTML 文档中某个位置何时发生鼠标单击 但是 如果单击发生在某些文本上 我需要知道单击发生在文本中的哪个字符上 有没有办法做到这一点 我能想到一些非常令人讨厌的解决方案 例如 对于文档中的每个字符 我可以

热门标签