1

我有两个跨度，单击时都会触发一个动作：

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

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

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

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

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

4

3 回答 3

1

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

这个想法是您在跨度上创建一个绝对定位的伪前元素。你给它一个比 span 低的 z-index，你将它的高度设置为 span 高度的 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;
}

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

于 2013-04-09T01:49:48.057 回答
0

您可以通过向您的跨度添加一些 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); 
});

一个更新的小提琴。

如果点击不是来自 a ，您可能希望忽略它<span>：

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

另一个小提琴。

如果您只想从单击的跨度中提醒文本：

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

最后一把小提琴。

于 2013-04-08T21:42:02.147 回答
0

将处理程序添加到外部 div，并将处理程序添加到跨度。当你处理跨度时，停止传播，这样 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-09T01:59:22.867 回答