如何处理可点击区域顶部的元素

Question

我已经构建了一个手风琴风格的控件，并试图使其尽可能易于访问和语义化。我现在可以正常工作了，但是我不太确定它的一个方面。不知为何感觉有点脏。不确定它是否脏。

演示：http://jsfiddle.net/MygBf/

在我的手风琴面板中，整个顶部栏（标题）都是可点击的。而且，我在每个顶栏的右侧都有一些关键字框。我实现这些关键字框的方式是绝对定位它们（​​将它们放在链接的顶部）。这会产生无法再点击栏的死区的不良影响。为了解决这个问题，我只是给关键字框一个 onclick（与链接相同的 onclick）。这一切都有效，但就像我说的那样，感觉很老套/肮脏。

最后，问题： 它是hacky/脏吗？如果是这样，是否有另一种方法来实现那里的关键字框，但不会在可点击区域中创建死区？

Answer 1

这不是您要寻找的，但我会将选择器更改为整个标题元素，而不是单独选择子元素。这样做可以得到你想要的效果：

$expandos.on('click', 'header', function(event){

演示：http://jsfiddle.net/Rm2Vn/

Answer 2

我不确定你的确切意思，但如果你不想在点击 boxes 时触发标题 onclick，试试这个：

$(".boxes").click(function(e){
    e.stopPropagation();
});