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

我有两个跨度，当点击这两个触发一个动作：如何水平扩展内联跨度的可点击区域？

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

我希望用户能够在包含分区的任何地方点击（这是风格看起来像一个盒子），和点击与其中一个或另一个跨度相关联。现在，用户必须点击点击事件的实际文本才能被触发。

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

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

有没有一个简单的CSS解决方案，这是我失踪了，还是我必须把一个点击处理程序放在周围的盒子上，并协调数学计算出哪个跨度的点击属于？

来源

2013-04-08 josh

我假设您希望点击成为点击的*最接近的*范围？ – lucuma 2013-04-08 21:37:45

简而言之，是的，数学它是... – Pevara 2013-04-08 22:11:04

@lucuma：是的，虽然主要是我希望它感觉用户直观，所以得到匹配的“正确”是不重要的，比感觉合理... – josh 2013-04-09 01:22:39

好吧，所以我找到了一个纯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/

来源

2013-04-09 01:49:48 josh

由于包装div已经是相对位置，因此您不需要跨度上的相对定位。如果您删除该内容，则可以在内容宽度为100％之前： http://jsfiddle.net/bJJLF/8/ – thgaskell 2013-04-09 02:22:16

刚刚意识到如果两个或更多跨度在同一行上，最新的将覆盖以前的任何一个：/您的解决方案很好，您可以将它们的宽度设置为是非常大的东西，然后将div溢出设置为隐藏。 – thgaskell 2013-04-09 02:42:51

你可以通过添加一些IDS您跨度到你想要的行为有点接近，所以我们可以找出它们：

<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。

来源

2013-04-08 21:42:02

你仍然需要点击文字。这里我并没有真正看到wath在功能方面的改变。或者我误解了这个问题？ – Pevara 2013-04-08 22:10:28

没错，这是有用的详细说明，但它并没有增加我正在努力的功能，即有击中div的点击但错过跨度被视为击中跨度。在我的实际代码中，将会有两个以上的跨度，并且它们的数量/内容将是动态的 – josh 2013-04-09 01:24:59

添加处理到外的div和处理程序的跨度。当你处理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'); 
});

来源

2013-04-09 01:59:22

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

回答

相关问题