javascript - 从div和链接调用函数不起作用

我有下面的代码。它可以在移动设备上运行，但是由于某种原因，令我感到困惑的是，它无法在桌面浏览器上运行。有任何想法吗？

<div class="top_nav_option_wrapper"
  onclick="javascript:changePage('{{ shop.url }}{{ link.url }}','fade');">
  <a href="#"
  onclick="javascript:changePage('{{ shop.url }}{{ link.url }}','fade');"
  class="top_nav_option">{{ link.title }}</a><br>
</div>

功能

  // Function used to transition a page out and navigate to a new page
  function changePage(goToUrl, type, id) {
    alert('HEY');
    if (type == 'collection_flicker') {
        prodElements = ['prod1', 'prod2', 'prod3', 'prod4'];
        for (i = 0; i < prodElements.length; i++) {
            if (document.getElementById(prodElements[i]) != null && document.getElementById(prodElements[i]) != document.getElementById(id)) {
                document.getElementById(prodElements[i]).style.opacity = "0";
                document.getElementById(prodElements[i]).style.display = "none";
            }
        }
        flickerEffect('collection_exit', 15, 50);
        window.setTimeout(function () {
            window.location.href = goToUrl
        }, 1000);
    } else if (type == 'fade' && currentTemplate == 'collection') {
        document.getElementById('watermark').style.transition = '1s opacity';
        document.getElementById('watermark').style.opacity = '0';
        document.getElementById('productCollectionList').style.transition = '1s opacity';
        document.getElementById('productCollectionList').style.opacity = '0';
        window.setTimeout(function () {
            window.location.href = goToUrl
        }, 500);
    } else {
        window.location.href = goToUrl;
    }
  }

最佳答案

我建议进行以下更改-我不确定link.url如何成为一种类型，但是您会看到想法

HTML：

<div class="top_nav_option_wrapper">
<a href="{{ shop.url }}"
  onclick="return changePage(this.href,'{{ link.url }}','fade');"
  class="top_nav_option">{{ link.title }}</a><br>
</div>

脚本

// Function used to transition a page out and navigate to a new page
function changePage(goToUrl, type, id) {

  if (type == 'collection_flicker') {
    prodElements = ['prod1', 'prod2', 'prod3', 'prod4'];
    for (var i = 0; i < prodElements.length; i++) {
      var prodelem = document.getElementById(prodElements[i]);
      if (prodelem != null && prodelem  != document.getElementById(id)) {
        prodelem.style.opacity = "0";
        prodelem.style.display = "none";
      }
    }
    flickerEffect('collection_exit', 15, 50);
    window.setTimeout(function () {
        window.location.href = goToUrl
    }, 1000);
    return false; // cancel link
  } else if (type == 'fade' && currentTemplate == 'collection') {
    document.getElementById('watermark').style.transition = '1s opacity';
    document.getElementById('watermark').style.opacity = '0';
    document.getElementById('productCollectionList').style.transition = '1s opacity';
    document.getElementById('productCollectionList').style.opacity = '0';
    window.setTimeout(function () {
        window.location.href = goToUrl
    }, 500);
    return false; // cancel link
  }
  return true; // allow link
}

关于javascript - 从div和链接调用函数不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30254064/