Question

我有一个像div构造的表，每行有4个“列”：

<div class="entry-row">
    <div class="entry-color">&nbsp;</div>
    <div class="entry-item">aaa</div>
    <div class="entry-buttons">xxx</div> 
    <div class="entry-count">bbb</div>
</div>

用css：

.entry-row
{
  width:100%;
  display: table-row;
  height:32px;
}
.entry-color
{
    float:left;
    margin-right: 3px;
    display:table-cell;
    height:32px;
}
.entry-item
{
    float:left;
    height:32px;
    vertical-align: middle;
    display:table-cell;
    font-weight: bold;
    font-size: 120%;
}
.entry-count
{
    float:right;
    height:32px;
    display:table-cell;
    vertical-align: middle;
    margin-right:3px;
}
.entry-buttons
{
    float:right;
    height:32px;
    display:table-cell;
}

所以它看起来像：| aaa _____________ bbb _ xxx |

我想在整行上使用click事件，除了buttonpart（xxx）

我在行上使用了一个单击处理程序而不是按钮：

$(".entry-row").not(".entry-buttons").click(function() {
    alert("1");
});

但它也在按钮上执行。我想我不能使用选择器进行入门项和入门计数，因为如果内容很短，它们之间可能存在差距。

如何获得整行的点击处理程序，而不是按钮div？

Answer 1

您需要使用event.stopPropagation()。

你可以看到我的小提琴。

http://jsfiddle.net/ebilgin/rL0bmucw/

Answer 2

只需添加一个if子句以防止点击此功能

$(".entry-row").click(function(e) {
    if(e.target.className!=='entry-buttons'){
      alert(1);
    }else{
      //if you want to execute anything on .entry-buttons else leave it blank or discard the else
    }
});

jquery选择器有异常

2 个答案: