javascript - onclick 事件包含剩余空间

Question

在下面的 HTML 代码中，当我单击文本时，会显示一条消息。我需要 onclick 事件也包含文本右侧的空白。

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<span class="list-group-item" type="button">
    <span class="label label-primary label-as-badge">3</span>
    <span class="label label-default label-as-badge">1</span>
    <span class="label label-success label-as-badge">0</span> 
    <span onclick="alert('you click me')">my text</span>  
</span>

更新

由于我的文字对某些人来说是模棱两可的，所以我通过图像来表示。蓝色椭圆形显示 onclick 操作的区域。红色椭圆表示我想扩大这个事件的范围。如果用户点击红色椭圆，则必须激活此事件。

Answer 1

您将需要使用类似布局的表格，在元素上使用 display:table 和 display:table-cell ，并指定要占用行中剩余空间的元素“width:100%”

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<span style="display:table;width:100%;" class="list-group-item" type="button">
    <span style="display:table-cell;" class="label label-primary label-as-badge">3</span>
    <span style="display:table-cell;" class="label label-default label-as-badge">1</span>
    <span style="display:table-cell;" class="label label-success label-as-badge">0</span> 
    <span style="display:table-cell;width:100%;background-color:#ccc;" onclick="alert('you click me')">my text</span>  
</span>