如何使用 Javascript 将点击事件保存到 HTML 表单答案

【问题标题】：How to save click event to HTML form using Javascript如何使用 Javascript 将点击事件保存到 HTML 表单
【发布时间】：2020-06-11 06:54:18
【问题描述】：

我有一个 HTML 表单，其中包含以下格式的多个链接：

<a id="url_1" href="#" target="_blank">LINK</a>

如何检测是否点击了此类链接，然后在我的表单中保存该事件（例如，url_1.clicked）？

我试过了

<script>
    function updateInput(){
    document.getElementById("#url_1").value = "clicked";
}
</script>

并将onclick="updateInput(this.value)" 添加到链接中，但这不起作用。

我想问题在于链接不是输入，因此无法更新。但是，我一直在为表单创建适当的输入。在提交表单的数据文件中，一个变量应该表明链接是否被点击。

【问题讨论】：

您能否发布整个表单并说明单击链接时您要具体更新的内容？

标签： javascript html forms hyperlink

【解决方案1】：

 function updateInput(){
    document.getElementById("url_1").innerHTML = "clicked";
    
}

&lt;a id="url_1" href="#" target="_blank" onClick="updateInput()"&gt;LINK&lt;/a&gt;

将 onClick 添加到<a> 标签对您来说可以吗？

【讨论】：

那不行，表单提交时a-tag的信息不可用。

【解决方案2】：

您可以使用隐藏输入来保存点击链接数组

var clickedlinks = [];
document.querySelectorAll("a").forEach((a)=>{
 a.addEventListener("click",addtoarr);
});
document.querySelector("form").addEventListener("submit",fnsubmit);

function addtoarr(){
  clickedlinks.push(this.outerHTML);
}

function fnsubmit(){
  this.querySelector("input[type=hidden]").value= JSON.stringify(clickedlinks);
  console.log(JSON.parse(this.querySelector("input[type=hidden]").value)[0]);
  event.preventDefault();//return true;
}

<form>
<a id="url_1" href="#" target="_blank">LINK</a>
<input type="hidden" name="clickedlinks">
<input type="submit">
</form>

【讨论】：

【解决方案3】：

试试Event.preventDefault

var ids = ["url_1"];
for(let id of ids) {
  document.querySelector(`a#${id}`).addEventListener("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log("Prevented click navigation on anchor");
    // ...
    // Do your stuff
    // ...
    var link = document.querySelector(`a#${id}`).getAttribute("href");
    if (link[0] == "#") {
      link = `${location.href.split("#")[0]}${link}`;
    }
    location.href = link;
  });
}

&lt;a id="url_1" href="#test" target="_blank"&gt;LINK&lt;/a&gt;

【讨论】：

【解决方案4】：

今天在同事的帮助下解决了这个问题。这是唯一对我有用的解决方案：

JavaScript：

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<script>
var clickedlinks = [0,0,0,0];

$('html').on('click','.tracked',function () {
    var id = $(this).attr('id').split('_')[1];
    console.log(id);
    clickedlinks[id] += 1;
    $('#tracker').val(clickedlinks);
});
</script>

HTML：

<form>
<a id="url_0" class="tracked" target="_blank">LINK</a>
<a id="url_1" class="tracked" target="_blank">LINK</a>
<a id="url_2" class="tracked" target="_blank">LINK</a>
<a id="url_3" class="tracked" target="_blank">LINK</a>
<input id="tracker" type="hidden" name="tracker">
<input type="submit">
</form>

每个链接的点击次数保存在clickedlinks 中，然后通过隐藏的输入字段作为tracker 发送到表单。为此，每个链接 id 必须以 _{number} 结尾，就像在 url_1 中一样。

【讨论】：