防止 contenteditable 元素在单击父级时获得焦点

2023-12-23

点击时anywhere在以下示例中,在“外部”div 容器上方,contenteditable span 元素获得焦点。

<div style="margin:30px">
    <span contenteditable="true" style="background:#eee">
        Hello World
    </span>
    <div>Outside</div>
</div>

这是一个 jsFiddle:http://jsfiddle.net/AXM4Y/ http://jsfiddle.net/AXM4Y/

我希望 contenteditable 的行为更像真实的文本输入,因此仅单击 span 元素本身就应该触发其焦点。我该怎么做呢?如何停止容器元素的事件捕获。我已经在父 div 上尝试过使用 jQuery 的“e.stopPropagation()”,但它不起作用。


我按照我的方式修复了它pointer-events: none在父元素上和pointer-events: all在具有内容可编辑属性的元素上。

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

防止 contenteditable 元素在单击父级时获得焦点 的相关文章

  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何停止TinyMCE删除span标签?

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything
  • 在多个按钮中调用相同的 jQuery 函数

    我对 jQuery 不太熟悉 我下载了这段代码来创建淡入 淡出弹出表单 这是代码
  • IE 11 中的 CSS Display Flex 无法正常工作,图像会溢出

    我正在使用 CSSdisplay flex 以某种方式显示它们 在 Chrome 中 它看起来很完美 很漂亮 但在 IE 中 图像超出了我放置它们的元素 https jsfiddle net m42k7Lk5 8 https jsfiddl
  • 以编程方式更改 html 选择下拉列表后 onchange 不会触发

    我在 HTML 中有一个选择
  • Chrome:当父级固定时,无法将一个绝对 div 放置在另一个 div 上

    我发现 当我想要位于顶部的 div 的父级固定时 我无法将一个绝对定位的 div 放置在 Chrome 中的另一个 div 上 div div div div div div 这是演示该问题的 JSFiddle http jsfiddle
  • 为什么开发者讨厌 iframe? [复制]

    这个问题在这里已经有答案了 可能的重复 iframe 被认为是 不好的做法 吗 https stackoverflow com questions 362730 are iframes considered bad practice 在与
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

  • Scala method = Trait { ... } 含义

    我正在尝试同时学习 Scala 和 Play 框架 在我看来 Scala 有很多非常酷的想法 但我的挫败感之一是试图理解方法 函数 lambda 匿名函数等的所有不同语法 所以我的主应用程序控制器如下所示 object Applicatio
  • 如何将 MNIST 图像加载到 Pytorch DataLoader 中?

    用于数据加载和处理的 pytorch 教程非常特定于一个示例 有人可以帮助我了解更通用的简单图像加载的函数应该是什么样子吗 教程 http pytorch org tutorials beginner data loading tutori
  • 使用带有 ES6 生成器的 redux-saga 与带有 ES2017 async/await 的 redux-thunk 的优缺点

    现在有很多关于 redux 镇最新的孩子的讨论 redux saga redux saga https github com redux saga redux saga 它使用生成器函数来监听 调度操作 在我开始思考它之前 我想知道使用的优
  • html中可能有“继承”吗?

    假设我的所有 html 页面都有一个内容相同的顶栏和横幅 是否可以让页面从基本 html 页面继承内容 而不是在所有 html 页面上复制这些内容的代码 例如 base html可以有顶栏 横幅等 所有重复的内容 其余页面 index ht
  • 如何获取bash脚本中执行的命令的进程ID?

    我有一个脚本我想同时运行2个程序 一个是c程序 另一个是cpulimit 我想先用 在后台启动C程序 然后获取C程序的PID和将其交给 cpulimit 它也将通过 在后台运行 我尝试在下面执行此操作 它只是启动第一个程序 并且从不启动 c
  • 对存储在数据库中的字符串进行插值

    我们希望在数据库中维护从 ASP NET Web 应用程序发送的电子邮件 这个想法是将电子邮件的格式存储在数据库中 问题是电子邮件应包含订单特定信息 例如 感谢您的订单约翰 史密斯 您的订单1234已收到 我想要实现的是 我在数据库列值中使
  • iOS 应用程序中全局常量存储在哪里?

    我的 iOS 应用程序中的大多数模型都会查询 Web 服务器 我想要一个存储服务器基本 URL 的配置文件 它看起来像这样 production static NSString const baseUrl http website exam
  • 为什么 ResizeObserver 构造函数回调接受条目数组而不是单个条目?

    考虑到ResizeObserver 构造函数 https developer mozilla org en US docs Web API ResizeObserver ResizeObserver 其第一个参数是一个回调 它接受两个参数
  • 如何将MYSQL中的Blob数据转换为Android ImageView

    Android 3 1 API 12 严格来说 这是一个商业应用程序 不会出现在任何其他设备上 我 n00b 正在尝试检索在我们服务器上的 Mysql 中存储为 Blob 的图像数组 并将它们添加到ImageView在 Android 中
  • 在 Django 应用程序中提供静态网页的最佳方式是什么?

    我正在构建一个相对简单的Django http en wikipedia org wiki Django 28web framework 29应用程序 除了应用程序的大部分动态部分所在的主页之外 我还需要一些根本不是动态的页面 About
  • Spring 注释验证 - 检查更新与添加时的唯一性

    我有一个名为 sport 的 POJO 其属性有 sportID sportName 玩家数量 使用带注释的验证 我编写了自己的注释约束来检查数据库中是否已存在 sportName 当尝试添加 sportName 时它效果很好 但是如果我尝
  • VS Code“在终端中运行 Python”播放按钮不起作用

    现在我知道这个问题之前已经被问过 没有找到Python 不带参数运行以从 Microsoft Store 安装 或从 设置 禁用此快捷方式 https stackoverflow com questions 65348890 python
  • Jquery检查图像是否已加载[重复]

    这个问题在这里已经有答案了 可能的重复 图像加载时的 jQuery 回调 即使图像已缓存 https stackoverflow com questions 3877027 jquery callback on image load eve
  • Android PPM编码器音频库

    我需要在 Android 上实现音频 PPM 脉冲位置调制 参考 http en wikipedia org wiki Pulse position modulation http en wikipedia org wiki Pulse p
  • Firebase 连接检查 Android 中的在线离线状态

    如果用户关闭 wi fi 3g 4g 等并反向 无互联网连接 Firebase 数据库名称子连接 true false 因此 当互联网连接 wi fi 3g 4g 等关闭或丢失时 用户就会处于离线状态 因此无法找到他 记住两个场景 之前和之
  • nhibernate Iesi ISet 无法删除()

    我有 2 个由 NHibernate 处理的类 AssetGroup Asset AssetGroup 有一个 ISet assets 集合 AssetGroup 的构造函数会说 assets new HashSet
  • android webview backkey中用于重定向href链接的死循环

    在处理重定向链接时 我在使用后键的 Android webview 应用程序中遇到了死循环 例如 当我的 webview 启动时 它会转到 link0 在link0中 有一个href链接 该链接链接到链接1 链接重定向到链接2 因此 如果我
  • MySQL:合并两个不同的表,无需 JOIN 或 UNION

    我需要合并两个表 两者都有一个主键列日期 但具有不同的值 不同的时间间隔 两者都有不同的 未知 列 我不知道列的名称 两个表中可能出现相同的列名 我不知道有多少列 但都是相同的类型 一个例子 table1 date colA colB co
  • 在 PHP 和 MySQL 中使用时区

    我应该如何处理时区 只为用户存储偏移量是否安全 或者我还应该知道区域 位置吗 当我比较 Wikipedia 和 PHP 中的偏移值时 有些不匹配 我应该相信哪个 最后我应该如何在 PHP 中处理它 我可以只执行 时间 服务器偏移 用户偏移
  • 防止 contenteditable 元素在单击父级时获得焦点

    点击时anywhere在以下示例中 在 外部 div 容器上方 contenteditable span 元素获得焦点 div style margin 30px span style background eee Hello World