javascript - 如何从 Javascript OnClick 函数中排除 以便链接本身起作用？

Question

我有一个功能，每当用户点击它时，它就会与产品边框(用于比较功能)。目前，只要他们点击框中的任何内容，它都会突出显示，这很好。但是，我想只排除标题，它也是书下的链接，这样当他们单击标题(链接)时，他们就会被带到另一个页面。

另外，如何才能将该功能限制为仅点击 3 次？目前，他们可以突出显示任意数量的图书。

为产品生成的 HTML 代码:

<div class='col-md-3 col-sm-4 col-xs-12'>
  <div class='product' data-id='19' data-title='Book 19''>
    <center>
      <img class='img-responsive' src='admin_area/product_images/book-19.jpg' style='margin-top: 5%;'>
    </center>
    <div class='text' style='text-align: center;'>
      <center>
        <a href='https://edubookenhancement.com/book/148927379x'> Book 19 </a>
      </center>
    </div>
  </div>
</div>

Answer 1

你可以像下面这样做:

//for counting clicks
var count = 0;

$(".product").on('click', function(e) {
  e.preventDefault();


  //if class is already there
  if ($(this).closest('.product').hasClass("compare")) {

    $(this).closest('.product').removeClass("compare");
    //decrement count

    count = count - 1;


  } else if (count <= 2) {
  //increment
    count += 1;
    $(this).closest('.product').toggleClass('compare');

  } else {
    //cannot select
    alert("cannot select more then 3 product");
  }


});
//getting current a click and redirect to page  specified in href   
$('a').on('click', function(e) {
  $(this).closest('.product').toggleClass('compare1');
  var href = $(this).attr("href");
  console.log(href);
  //redirect to that url
  window.location.href = href;


});

img {
  width: 15px;
  height: 15px;
}

.compare {
  border: 1px solid red;
}

.compare1 {
  border: 1px solid white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-md-3 col-sm-4 col-xs-12'>
  <div class='product' data-id='19' data-title='Book 19' '>
    <center>
      <img class="img-responsive" src="http://www.iarch.co.in/book/img/book.png" >
    </center>
    <div class="text" style="text-align: center;">
      <center>
        <a href="https://edubookenhancement.com/book/148927379x"> Book 19 </a>
      </center>
    </div>
  </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
  <div class="product" data-id="18" data-title="Book 18">
    <center>
      <img class="img-responsive" src="http://www.iarch.co.in/book/img/book.png" style="margin-top: 5%;">
    </center>
    <div class="text" style="text-align: center;">
      <center>
        <a href="https://edubookenhancement.com/book/148927379x"> Book 18 </a>
      </center>
    </div>
  </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
  <div class="product" data-id="18" data-title="Book 18">
    <center>
      <img class="img-responsive" src="http://www.iarch.co.in/book/img/book.png" style="margin-top: 5%;">
    </center>
    <div class="text" style="text-align: center;">
      <center>
        <a href="https://edubookenhancement.com/book/148927379x"> Book 18 </a>
      </center>
    </div>
  </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
  <div class="product" data-id="18" data-title="Book 18">
    <center>
      <img class="img-responsive" src="http://www.iarch.co.in/book/img/book.png" style="margin-top: 5%;">
    </center>
    <div class="text" style="text-align: center;">
      <center>
        <a href="https://edubookenhancement.com/book/148927379x"> Book 17 </a>
      </center>
    </div>
  </div>
</div>