如何从 Javascript OnClick 函数中排除 <a> 以便链接本身有效？

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

重写 Swati 的答案，以确保您不会在错误的情况下触发错误。

$selectedItems = $('.compare').length;

if ($selectedItems < 4) {

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

      //IE Friendly Prevent Default

      if(typeof e.preventDefault == 'function'){

          e.preventDefault();

      } else {

          e.returnValue = false;

      }

      $(this).closest('.product').toggleClass('compare');

    }

} else {

    alert("Cannot select more then 3 product");

}

此方法将计算有多少个元素具有比较类，除非少于 4 个，否则您无法触发比较功能。

就像使用警告e.preventDefault()会导致您的脚本无法在 IE 中运行一样。确保为此功能实现 IE 回退。