jquery 异常选择器

Question

我有一个类似于 div 的 table 结构，每行有 4 个 "columns"：

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

我想在除按钮部分 (xxx) 之外的整行上使用点击事件

我在没有按钮的行上使用了点击处理程序：

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

但它也在按钮上执行。我想我不能为条目项和条目计数使用选择器，因为如果内容太短，它们之间可能会有差距。

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

Answer 1

只需添加一个 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
    }
});

Answer 2

您需要使用 event.stopPropagation().

你可以看到我的fiddle.

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

jquery 异常选择器

jquery selector with exception

jquery

selector