如何从 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) {&nbsp; &nbsp; $(".product").on('click', function(e) {&nbsp; &nbsp; &nbsp; //IE Friendly Prevent Default&nbsp; &nbsp; &nbsp; if(typeof e.preventDefault == 'function'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.returnValue = false;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; $(this).closest('.product').toggleClass('compare');&nbsp; &nbsp; }} else {&nbsp; &nbsp; alert("Cannot select more then 3 product");}此方法将计算有多少个元素具有比较类，除非少于 4 个，否则您无法触发比较功能。就像使用警告e.preventDefault()会导致您的脚本无法在 IE 中运行一样。确保为此功能实现 IE 回退。