Question

我有一个问题。我有一些产品块，产品块上有透明的覆盖层，其中显示了显示信息或放在购物车中的按钮。我在<a href>上使用了一个小的JavaScript函数，但问题是，当在手机上点击产品块时，叠加层会出现，但是您必须单击两次才能到达按钮，因为它不知何故首先点击<a href>

这是产品块：

<div class="block shadow1">
  <a href="" class="trigger"></a>
  <div class="overlay"></div>
  <div class="overlay-content smaller">
    <div class="align">
      <div class="vertical">
        <a href="'.$permalink.'" title="'.$title.'">
          <div class="button permalink">
            <div class="align">
              <div class="vertical">
                <img src="'.$imagesrc.'/images/info.svg">
              </div>
            </div>
          </div>
        </a>
        <div class="button transparent add-to-cart">
          <div class="align">
            <div class="vertical">
              <img src="'.$imagesrc.'/images/add-to-cart_1.svg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是JavaScript：

$('a.trigger').on('click', function() {
  $(this).toggle('static');
    return false;
});

Answer 1

 $('a.trigger').unbind("click").click(function(){
      $(this).toggle('static');
        return false;
    });

Answer 2

请更改以下javascript。它应该工作。

$("body").on('click touchstart', 'a.trigger', function() {
    $(this).toggle('static');
    return false;
});

在手机上必须单击两次才能单击按钮

2 个答案: