javascript - 单击超链接时如何将 href 值传递给 javascript 并在 window.location 中使用它？

Question

我有两种类型的超链接。当单击第一个超链接时，href 的值将传递给函数，但其​​值从未在 window.location 中使用!(因为它在 safari 而不是 iphone webApp 中打开链接)。当第二个超链接称为 href 的值永远不会传递给函数，并且再次在 safari 而不是 webApp 中打开 href 值!任何人都可以帮助我将 href 值传递给函数并在 window.location 中使用它而不是在 safari 上打开它.提前致谢。

<li class="x"><a id="1" title="1" href="./test.php?try" onclick="myFunction(location.href=this.href);"> <img id="Button1" src="./1.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">FIRST</div></a></li>
<li class="x"><a id="2" title="2" href="./test.php" onclick="myFunction(location.href=this.href+'?try&appid='+currentID;return false;);"> <img id="Button2" src="./2.png" alt="" width="42" height="42" border="0"><div class="caption" style="color:red">SECOND</div></a></li>


<script>
function myFunction(myLink) {

alert("hello"+myLink);

    window.location = myLink;
}
</script>

Answer 1

这里有几个因素在起作用。正如 fiprojects 指出的那样，最好不要使用内联 JavaScript(某些原因只是个人喜好)。您最终会重复自己并使代码难以维护( among other reasons )。你最好的选择是使用 Event Listeners (w3schools 链接，并不总是最好的资源，但对于这个例子来说已经足够了)。如果您使用 JavaScript 库 (jQuery)，这些都非常简单。但由于您请求了 JavaScript 解决方案，我将在回答中概述如何做到这一点。

首先，让我们格式化您的代码以使其更易于阅读:

<li class="x">
    <a id="1" title="1" href="./test.php?try" class="myLink">
        <img id="Button1" src="http://placehold.it/360x240">
        <div class="caption" style="color:red">FIRST</div>
    </a>
</li>
<li class="x">
    <a id="2" title="2" href="./test.php" class="myLink"> 
        <img id="Button2" src="http://placehold.it/360x240">
        <div class="caption" style="color:red">SECOND</div>
    </a>
</li>

我在这里只做了一些更改。我删除了 JavaScript onclick 。我创建了一个占位符图像(仅出于我自己的目的，因为我没有您的图像，您需要将您的图像放回那里)。最后，我添加了一个 class="myLink"给您<a> 。这将使我们能够更轻松地通过我们的事件监听器引用您的链接。

对于 JavaScript

<script>
    var linksArray = document.getElementsByClassName("myLink");

    var myFunction = function(event) {
        event.preventDefault();
        var href = this.getAttribute("href");
        alert('hello ' + href);
        window.location = link;
        return false;
    };

    for (var i = 0; i < linksArray.length; i++) {
        linksArray[i].addEventListener('click', myFunction, false);
    }
</script>

第一行创建一个数组，其中包含任何具有 class="myLink" 的元素。稍后我们将循环访问该数组，并添加事件监听器。在循环之前，我们需要创建您的函数。

为了防止用户单击链接时发生默认操作，我们需要停止传播。所以我们将使用event.preventDefault()这里。我还添加了return false;到函数。两者都是为了做同样的事情。

我们将使用 this 而不是传递变量以获得引用。我们还将使用 JavaScript 函数 getAttribute并通过 href到它。这将拉 href为您带来值(value)。

最后，我们循环遍历 linksArray 。我们正在添加 click事件监听器和分配 myFunction作为callback 。现在，只要用户单击其中一张图像，此功能就会启动。

和here's a working example on JSFiddle .