1

2 つのスパンがあり、どちらもクリックするとアクションをトリガーします。

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

スパンを 1 つの段落のように表示したい (つまり、おそらくスタイルを維持する必要があるdisplay: inline)。改行がありますが、私はそれらがどのように作成されるかについて柔軟に対応しています (したがって</br>、必要に応じて s を削除できます)。

私が見逃している簡単なcssソリューションはありますか、それとも周囲のボックスにクリックハンドラーを配置し、座標計算を行ってクリックがどのスパンに属するかを把握する必要がありますか?

4

3 に答える 3

1

さて、これまでのところかなり良いと思われる純粋なcssソリューションを見つけました。それを改善するための提案は役に立ちます。現在の主な制約は、含まれているボックスの幅を知る必要があるということです。これは、私が扱うことができる制約です。

アイデアは、スパンに絶対配置の疑似前要素を作成することです。スパンよりも低い 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-09T01:49:48.057 に答える
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 に答える