Question

我有以下html元素：

<h1>Some text</h1>

我需要检测点击并识别它是否位于元素的文本部分或空白部分。

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

我也无法修改此元素的内部html，因此将其拆分为两个<span>元素也不可行。

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

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

Answer 1

问题“我也无法修改此元素的内部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>

Answer 2

通过使用Jquery，您可以使用.click函数来了解是否单击了h1标签。

$('#test').click(function(){
    alert("Clicked!");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id='test'>TEST</h1>

检测单击块元素的文本部分

2 个答案: