使用事件侦听器单击 <a href...> 时，将 url 参数从一个页面动态传递到另一个页面答案

【问题标题】：Dynamically pass a url parameter from one page to another when clicking <a href...> with event listener使用事件侦听器单击 <a href...> 时，将 url 参数从一个页面动态传递到另一个页面
【发布时间】：2014-08-14 05:14:31
【问题描述】：

单击其中一个链接时，我正在尝试将 url 参数（在本例中为 ID）发送到另一个页面。我已经尝试了多种方法，发现一种 NEARLY 有效，除了当我单击非链接元素（例如表单按钮）时，它仍然会附加 url。

事件监听如下：

window.addEventListener("click", function(e) {
    var href = e.target.getAttribute("href");
    if(href) {
        location.href = href + "?id="+id_search_input;
        e.preventDefault();
    }
});

链接：

    <ul id="nav_ul">
        <li><a href="ask_q.html">s</a></li>
        <li><a href="page1.html">Page 1</a></li>
        <li><a href="page3.html">Page 3</a></li>
    </ul>

我要传递给 URL 的内容：?id=0123456789

我想事件监听器需要在点击以外的东西上？

谢谢！

【问题讨论】：

标签： javascript html hyperlink href

【解决方案1】：

这里是纯 JS。我刚刚在<a> 标签上添加了一个类，但你可以抓住<ul>，如果你愿意的话可以深入挖掘。

var navElms = document.getElementsByClassName('nav'),
i;
for(i = 0; i < navElms.length; i++) {
    navElms[i].addEventListener('click', function(e) {
        e.preventDefault();
        var href = this.getAttribute("href"),
        test = document.getElementById('test');
        test.innerHTML = "<p>" + href + "?id=234234234</p>";

    });
}

http://jsfiddle.net/31nbwuxv/

【讨论】：

【解决方案2】：

在 uls id 上添加监听器，然后在点击时更改 url

<ul id="nav_ul">
        <li><a href="ask_q.html" >s</a></li>
        <li><a href="page1.html" >Page 1</a></li>
        <li><a href="page3.html" >Page 3</a></li>
</ul>

js:

$('#nav_ul').on('click', 'a', function(e){
    $(this).before($(this).clone());
    $(this).attr('href', old+'?123');
    $(this).remove();
})

在这里试试：（更新） http://jsfiddle.net/04cx09c1/2/

【讨论】：

在同一个链接上点击两次后你得到了两次 id 属性：?id=0123456789?id=0123456789 -- 没关系？
@rims 有趣，待命