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

Question

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

请像下面这样更改 javascript。它应该可以工作。

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