Question

我有两个跨度，这两个跨度在点击时触发一个动作：

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

我希望用户能够点击包含div中的任何位置（其样式看起来像一个框），并使点击与一个或另一个范围相关联。现在，用户必须单击click事件的实际文本才能被触发。

以下是它的样子：http://jsfiddle.net/bJJLF/1/。

我希望跨度看起来像一个段落（即，所以我可能需要保持它们的样式display: inline）。会有换行符，但我很灵活：它们是如何创建的（所以我可以在必要时杀死</br>。）

我是否缺少一个简单的css解决方案，或者我是否必须在周围的框上放置一个点击处理程序并协调数学以确定点击属于哪个范围？

Answer 1

好的，所以我找到了一个看起来相当不错的纯css解决方案。任何有关改进它的建议都会有所帮助。现在的主要约束是你需要知道包含框的宽度，这是我可以使用的约束。

这个想法是你在跨度上创建一个绝对定位的psuedo-before元素。你给它一个较低的z-index然后是跨度，你将它的高度设置为跨度高度的100％，将其设置为0，宽度等于容器的宽度：

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

跨度必须相对定位：

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

这是更新的示例（现在有悬停效果！）：http://jsfiddle.net/bJJLF/7/

Answer 2

通过向您的跨度添加一些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>上的点击，然后检查事件对象，该对象将包含点击冒泡的目标元素：

$('div').click(function(e) { 
    alert($(this).text() + ' from ' + e.target.id); 
});

updated fiddle。

如果点击不是来自<span>：

，您可能希望忽略该点击

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

另一个fiddle。

如果您只想提示点击的范围内的文字：

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

最后一次fiddle。

Answer 3

向外部div添加处理程序，并为span添加处理程序。处理span时，停止传播，因此不会调用div的处理程序。 http://jsfiddle.net/mgzke/

<div class="wrap">
    <span class="firstspan">This is a multiline<br/>
    chunk of text.</span>  <span>And this is a <br/>
    second one.</span>
</div>


// Using jQuery for simplicity only
$('.wrap').click(function(){
   console.log('Click in div');
});

$('.wrap .firstspan').click(function(e){
    e.stopPropagation();
   console.log('Click in spans');
});

如何水平扩展内联跨度的可点击区域？

3 个答案: