如何水平擴展內聯跨度的可點擊區域？

Question

我有兩個跨度，當點擊這兩個觸發一個動作：

<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解決方案，這是我失蹤了，還是我必須把一個點擊處理程序放在周圍的盒子上，並協調數學計算出哪個跨度的點擊屬於？

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

你可以通過添加一些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。

Answer 3

添加處理到外的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'); 
});