Javascript 如何水平扩展内联跨距的可单击区域？

我有两个跨距，单击这两个跨距都会触发动作：

<div>
    <span>This is a multiline<br/>
    chunk of text.</span>  <span>And this is a <br/>
    second one.</span>
</div>

这是一个多行

文本块。这是一个

第二个。

我希望用户能够单击包含div的任何位置（该div的样式类似于一个框），并将单击与一个或另一个跨度相关联。现在，用户必须单击实际文本才能触发单击事件

下面是它的外观：

我希望跨距看起来像一个单独的段落（也就是说，我可能需要保持它们的样式

display:inline

）。将会有换行符，但我对它们的创建方式很灵活（因此，如果需要，我可以杀死

）

---

有没有一个简单的css解决方案是我所缺少的，或者我必须在周围的框中放置一个点击处理程序并进行坐标计算，以确定点击属于哪个范围？

通过向范围添加一些ID，我们可以识别它们，您可以更接近您想要的行为：

<div>
    <span id="span1">This is a multiline<br/>
    chunk of text.</span>  <span id="span2">And this is a <br/>
    second one.</span>
</div>

安

如果单击不是源于

，您可能希望忽略它：

另一个

如果您只想从单击的范围中警告文本：

$('div').click(function(e) {
    if (e.target.tagName.toUpperCase() === 'SPAN') {
        alert($(e.target).text() + ' from ' + e.target.id); 
    }
});

---

最后一点。

通过向跨度添加一些ID，我们可以识别它们，您可以更接近您想要的行为：

<div>
    <span id="span1">This is a multiline<br/>
    chunk of text.</span>  <span id="span2">And this is a <br/>
    second one.</span>
</div>

安

如果单击不是源于

，您可能希望忽略它：

另一个

如果您只想从单击的范围中警告文本：

$('div').click(function(e) {
    if (e.target.tagName.toUpperCase() === 'SPAN') {
        alert($(e.target).text() + ' from ' + e.target.id); 
    }
});

---

最后一个。

好的，我找到了一个纯css解决方案，到目前为止似乎还不错。任何关于改进的建议都会有所帮助。现在的主要约束是您需要知道包含框的宽度，这是一个我可以使用的约束

其思想是在跨度上创建一个绝对定位的psuedo before元素。给它一个较低的z索引，然后是跨度，将其高度设置为跨度高度的100%，将left设置为0，宽度等于容器的宽度：

span:before {
  content: '';
  display: inline-block;
  z-index: 1;
  width: 400px;
  height: 100%;
  position: absolute;
  left: 0px;
}

跨度必须相对定位：

span {
  z-index: 2;
  position: relative;
}

---

下面是更新后的示例（现在有悬停效果！）：

好的，所以我找到了一个纯css解决方案，到目前为止似乎还不错。任何关于改进的建议都会有所帮助。现在的主要约束是您需要知道包含框的宽度，这是一个我可以使用的约束

其思想是在跨度上创建一个绝对定位的psuedo before元素。给它一个较低的z索引，然后是跨度，将其高度设置为跨度高度的100%，将left设置为0，宽度等于容器的宽度：

span:before {
  content: '';
  display: inline-block;
  z-index: 1;
  width: 400px;
  height: 100%;
  position: absolute;
  left: 0px;
}

跨度必须相对定位：

span {
  z-index: 2;
  position: relative;
}

---

下面是更新的示例（现在有悬停效果！）：

将处理程序添加到外部div，将处理程序添加到span。处理跨度时，停止传播，这样就不会调用div的处理程序

这是一个多行

文本块。这是一个

第二个。
//使用jQuery只是为了简单
$（'.wrap'）。单击（函数（）{
console.log（'Click in div'）；
});
$（'.wrap.firstspan'）。单击（函数（e）{
e、 停止传播（）；
log（'Click-in-span'）；
});

将处理程序添加到外部div，将处理程序添加到span。处理跨度时，停止传播，这样就不会调用div的处理程序

这是一个多行

文本块。这是一个

第二个。
//使用jQuery只是为了简单
$（'.wrap'）。单击（函数（）{
console.log（'Click in div'）；
});
$（'.wrap.firstspan'）。单击（函数（e）{
e、 停止传播（）；
log（'Click-in-span'）；
});

我假设你希望点击距离点击最近？简而言之，是的，数学上是…@lucuma：是的，虽然我主要希望它对用户来说是直观的，但获得匹配的“正确”并不比感觉合理重要…我假设你希望点击距离点击最近？简而言之，是的，数学…@lucuma:是的，虽然我主要希望它能让用户感觉直观，但获得匹配的“正确”并不比感觉合理重要……你仍然需要点击文本。我看不出在功能方面有什么变化。或者我误解了这个问题？是的，这是一个有用的细化，但它没有添加我正在努力解决的功能，即点击div但错过跨距的点击被视为点击跨距。在我的实际代码中，将有两个以上的跨距，它们的数量/内容将是动态的。您仍然需要单击文本。我看不出在功能方面有什么变化。或者我误解了这个问题？是的，这是一个有用的细化，但它没有添加我正在努力解决的功能，即点击div但错过跨距的点击被视为点击跨距。在我的实际代码中，将有两个以上的跨度，它们的数量/内容将是动态的。您不需要在跨度上进行相对定位，因为包装器div已经是相对位置。如果删除该选项，则可以使：before内容宽度为100%。刚刚意识到，如果两个或多个跨距位于同一行上，则最新的跨距将覆盖任何以前的跨距：/您的解决方案很好，您可以将它们的宽度设置为非常大的值，然后将div overflow设置为hidden。您不需要跨距上的相对位置，因为包装器div已经是相对位置。如果删除该选项，则可以使：before内容宽度为100%。刚刚意识到，如果两个或多个跨距在同一行上，最新的跨距将覆盖任何以前的跨距：/n您的解决方案很好，您可以将它们的宽度设置为非常大的值，然后将div overflow设置为hidden。