内部跨度的标签无法捕获点击

Question

单击红色区域时不会触发click事件。 跨度填充在a:active状态更改。

如何定位“移动区域”而不定位跨度本身？

小提琴：http://jsfiddle.net/KC2ct/

标记：

<a href="#"> <span>TEXTO</span> </a>
<p>debug</p>

CSS：

a{background-color: red}
span{color: white; background-color: blue}
a{display: block; width: 64px; height: 22px}
span{padding:5px}
a:active span{padding: 6px}
p.click{color: green}

JS：

$('a').click(function(){
    $('p').toggleClass('click');
});

它看起来像是正常状态（注意红色右侧区域）：

按下时的样子（：激活）：

Answer 1

更新了CSS，看看你的更新小提琴

http://jsfiddle.net/KC2ct/5/

Answer 2

如果我理解正确，您可能希望使用onmousedown而不是单击...

Answer 3

添加显示：阻止跨度并隐藏红色区域：

跨度{填充：5像素;显示：块;}