时间戳

首页 > 解决方案 > 检测点击块元素的文本部分

javascript - 检测点击块元素的文本部分

问题描述

我有以下 html 元素：

<h1>Some text</h1>

我需要检测点击并识别它是落在文本部分还是元素的空白部分。

为了保持应用程序其余部分的一致性，我无法将此元素的显示更改为inline或inline-block。

我也无法修改此元素的内部 html，因此将其拆分为两个<span>元素也不是一种选择。

此元素内的文本不是恒定的，实际上是可编辑的。

我可以仅检测到对该标题的可见（文本）部分的点击吗？

标签： javascripthtml

解决方案

问题“我也无法修改此元素的内部 html，因此将其拆分为两个元素也不是一种选择。” 这是指事后还是事前？即是您无法更改 HTML 还是您无法通过 JS 进入并更改 HTML？

当前解决方案：我用标识符解析所有元素.clickable，删除并重建它们的文本内容并在它们周围放置跨度 - 这样我可以将点击侦听器添加到单个文本/跨度元素 - 让我可以访问文本本身。

const clickables = document.querySelectorAll('.clickable')
clickables.forEach(el => new Clickable(el))

function Clickable (el) {
  const _handleClick = ({target}) => console.log(target.innerHTML)
  const texts = el.textContent.split(/\s/)
  
  el.innerHTML = ''
  
  texts.forEach(t => {
    const span = document.createElement('span')
    span.innerHTML = `${t} `
    span.addEventListener('click', _handleClick)
    el.appendChild(span)
  })
}
<h1 class="clickable">Some text</h1>

<h2 class="clickable">Some! more! text2</h1>

推荐阅读