Question

我将onchange事件附加到输入文本，并将onclick事件附加到文本链接。点击事件在编辑文本框后单击时不会触发。而是触发更改事件。

问题已经证明here。

即使在编辑文本框后如何处理链接上的点击事件？

Answer 1

实际上当您编辑输入字段然后从文本框中丢失焦点时然后调用onChange事件。

请理解scanerio

您在输入字段中添加了一些文字
现在您点击任何地方而不是文本框
警报（ “改变”）;将被召集。

第一次在肯定编辑文本框后点击 onchange事件会叫你无法阻止它。

Answer 2

试试这个

<input type="text" id="input" />
<a href="javascript:void(0)">click me after editing</a>

document.getElementById("input").addEventListener("change", function(){
    alert( 'input field value changed');
});

document.getElementsByTagName("a")[0].addEventListener("click", function(){
    alert( 'Link clicked');
});

Answer 3

如果您将活动更改为onmousedown，则会在click活动之前抓住change。然后，您可以使用变量来防止更改事件处理程序触发。像这样：

//you'll need to declare your variable at the beginning
$(document).ready(function() {
    clicked=false;
});

//reset the variable when clicking on input
<input type= "text" id ="input" onchange='if(!clicked){alert("changed")}' onmousedown='clicked=false'> </input>

//on mousedown gets the click, prevent the change event from firing and fire this handler 
<a onmousedown='clicked=true;alert("hello");'>click me after editing</a>

https://jsfiddle.net/eob19qjm/1/

事件附加到其他元素时未触发的Click事件

3 个答案: