防止 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 元素在单击父级时获得焦点 的相关文章

  • 不要让最终用户保存密码[重复]

    这个问题在这里已经有答案了 可能的重复 禁用浏览器 保存密码 功能 https stackoverflow com questions 32369 disable browser save password functionality 是否
  • 修复输入字段后,html5 oninvalid 不起作用

    我的表单中有这个输入代码
  • 寻找领域事件的例子

    有谁知道在哪里可以找到域事件实现的示例代码 如乌迪 达汉 http www udidahan com in 领域事件 救赎 http www udidahan com 2009 06 14 domain events salvation 在
  • 未捕获的类型错误:无法读取未定义的属性“prop”

    我有 6 个输入复选框 如果选中的复选框超过 3 个 则最后一个复选框将被取消选中 为了更好地理解 请参阅我之前的question https stackoverflow com questions 35195235 if checkbox
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整
  • CSS 中的边框图像开头

    MDN 是这样定义的边框图像开始 https developer mozilla org en docs Web CSS border image outset border image outset 属性描述了边框的数量 图像区域超出边框
  • SELECT 元素中的图像[重复]

    这个问题在这里已经有答案了 我知道如何使用 CSS 背景图像属性让图片显示在 HTML 下拉表单元素中的选项旁边 但是 图像不会显示在所选元素上 有什么方法可以做到这一点 最好只使用CSS EDIT 这是列表元素的工作代码的示例 但是 当下
  • 使用 JavaScript 进行 HTML 到 MS Word 的页眉和页脚转换

    Am rendering my whole HTML page into MS word Here I tried by referring this link below https phppot com javascript how t
  • $(this) 在 jQuery 中如何工作

    jQuery 标签是如何实现的 this 到底工作吗 我知道如何使用它 但是 jQuery 如何知道哪个元素是 活动的 用于获取当前项目的原始 Javascript 标签是什么 还是只是 jQuery The this是一个简单的 java
  • android ndk 多点触控?

    我正在编写一个仅使用本机代码的应用程序 那么ndk中是否可以获取多点触控事件呢 我感觉我已经搜索了整个网络 但什么也没找到 有谁知道如何做到这一点 是的 您可以检查名为native activity查看如何获取输入事件 寻找engine h
  • 在 HTML5 中使用 JS 创建内联 SVG

    我正在使用本地 HTML5 文件 它有在顶部 我在里面放了这样的东西
  • 第一次从按钮提交时,只有单击两次后才会打开模态框

    我有一个模式弹出窗口可以通过单击按钮打开 不幸的是 当第一次在浏览器中提交时 我只能在单击两次后才能看到弹出窗口 但是 一旦弹出窗口打开并关闭 我就可以在下一次尝试中单击一次来打开模式 如果我刷新浏览器也会发生同样的情况 这看起来很奇怪 任
  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop
  • 当表格在 IE 中获得焦点时,表格滚动条会向上跳跃

    问题 我有一个table有包装的div with overflow y auto 一旦table获得焦点 滚动条向上跳 我怎样才能防止这种情况发生 我经历过这种行为IE9 不在 Chrome 中 请注意 我已添加tabindex到桌子上 以

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • 简单的颜色变化

    我正在创建一个用户界面 用户可以在其中更改页面的颜色值 我想要的是获取分配给其背景颜色的值并将其变亮一定程度 我只是想获得一条亮点线 而不必每次都制作新图像 示例 用户将背景颜色设置为 ECECEC 现在我希望某个元素边框变成 F4F4F4
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • 使用 div 或表格来包含链接列更好吗?

    我的页面底部有 3 列链接 每列都放入一个 div 中 所有三个 div 都包装在页面中央的一个大 div 中 这是更适合桌子的东西还是桌子不适合这项工作 您还可以使用 ul http www w3schools com tags tag

随机推荐

  • 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