Question

我开发了一个用户界面，你会点击它会弹出的卡片但是在卡片里面有两个链接，当我点击它时不应该回弹。我知道这些链接是该卡的一部分，我在卡选择器上放了一个事件。

所以我想实现这个场景：

当用户点击卡片时，无论在哪里......它都应该弹出..（它现在正在做）但是当用户点击这两个链接时它不应该弹回...它应该显示我的标签将自己处理...只需要一种不应该点击这些链接的方式，因为我想触发另一个事件来显示这些链接上的标签。

我用:not尝试了它，但它对我不起作用。

var card = $('.card');

card.click(function() {
  if ($(this).hasClass('gravitate')) {
    $(this).removeClass('gravitate');
    $(this).addClass('levitate');
  } else {
    $(this).addClass('gravitate');
    $(this).removeClass('levitate');
  }

});

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 30px;
}

.card {
  border: #ececec 1px solid;
  padding: 10px;
  width: 200px;
  margin-bottom: 10px;
}

.tab-pane {
  display: none;
}

.transition {
  transition: all 500ms
}

.gravitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
  width: 200px;
  transform: translate(0, 0);
}

.levitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
  width: 220px;
  transform: translate(-10px, 5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane first-name">Omer</div>
  <div class="tab-pane last-name">Hussain</div>
</div>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane first-name">Usman</div>
  <div class="tab-pane last-name">Ali</div>
</div>

Answer 1

您可以在链接中添加一个事件处理程序，以检查父卡是否具有levitate类，如果是，则停止click事件冒泡DOM并触发其他事件处理程序：

$('a.tab').click(function(e) {
  if ($(this).parent().hasClass('levitate')) {
    e.stopPropagation();
  }
})

＆＃13;

var card = $('.card');

card.click(function() {
  if ($(this).hasClass('gravitate')) {
    $(this).removeClass('gravitate');
    $(this).addClass('levitate');
  } else {
    $(this).addClass('gravitate');
    $(this).removeClass('levitate');
  }

});

$('a.tab').click(function(e) {
  if ($(this).parent().hasClass('levitate')) {
    e.stopPropagation();
  }
})

＆＃13;

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 30px;
}

.card {
  border: #ececec 1px solid;
  padding: 10px;
  width: 200px;
  margin-bottom: 10px;
}

.tab-pane {
  display: none;
}

.transition {
  transition: all 500ms
}

.gravitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
  width: 200px;
  transform: translate(0, 0);
}

.levitate {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
  width: 220px;
  transform: translate(-10px, 5px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane" class="first-name">Omer</div>
  <div class="tab-pane" class="last-name">Hussain</div>
</div>
<div class="card gravitate transition">
  <h4>Sample Card</h4>
  <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a>
  <div class="tab-pane" class="first-name">Usman</div>
  <div class="tab-pane" class="last-name">Ali</div>
</div>

＆＃13;

Answer 2

如果我理解正确，您希望卡片上的任何点击都会扩展/缩回，但如果用户点击任何链接则不会。如果是这样，它就像处理超链接一样简单点击功能并阻止事件传播。只需将其添加到您的JavaScript：

var cardTabs = $('.tab');
cardTabs.click(function() {
  alert("your handler");  
  return false;
});

您还可以使用click事件的防止默认和停止传播方法，这些方法是等效的（请参阅：event.preventDefault() vs. return false）

var cardTabs = $('.tab');
cardTabs.click(function(e) {
  alert("your handler");  
  e.preventDefault();
  e.stopPropagation();
});

在单击特定子项时，应运行不同的jQuery

2 个答案: