单击按钮时阻止Javascript onchange事件

我有一个输入字段，用于执行一些计算。有两个按钮，用户可以单击以指示要执行的计算集。但是，如果用户未单击任一按钮，我希望执行默认操作：

function button1Clicked() {
    alert('button 1 clicked');
}
function button2Clicked() {
    alert('button 2 clicked');
}
function noButtonClicked() {
    alert('no button was clicked');
}

我的字段如下所示：

<input type="text" id="inpt1" onchange="noButtonClicked();" />
<input type="submit" id="btn1" onclick="button1Clicked();" />
<input type="submit" id="btn2" onclick="button2Clicked();" />

我可以从按钮中获得所描述的执行操作，但它不可靠。单击其中一个按钮时，是否有更简单的方法阻止onchange事件触发

澄清：当用户编辑完输入字段后，如果没有单击任何按钮，则执行

noButtonClicked（）

。如果单击其中一个按钮，则执行与该按钮关联的函数，但不执行

noButtonClicked（）

函数。

我更喜欢使用jQuery

$("#btn1").click(function(e){
    e.preventDefault();
    alert('button 1 clicked');
});

$("#btn2").click(function(e){
     e.preventDefault();
 alert('button 2 clicked');
});
// you may want to use blur event, rather than change event
$("#inpt1").change(function(){
     alert('no button was clicked');
});

---

我会把它设置得有点不同。使用jQuery：

$('#inpt1').change(function(event){ 
alert('change event');
});

$('#btn1').click(function(event){ 
    alert('button 1 click');
    event.preventDefault();
});

$('#btn2').click(function(event){ 
    alert('button 2 click');
    event.preventDefault();
});

HTML:

<input type="text" id="inpt1" name="inpt1" />
<input type="submit" id="btn1" value="Submit" />
<input type="submit" id="btn2" value="Submit" />

此外，文本输入的change（）事件只有在用户离开输入（模糊）后才会触发。如果你想跟踪变化

希望这有帮助

---

好的，我现在明白你的问题了。您无法中断模糊事件。不幸的是，这是不言而喻的。这是一个经过测试的解决方案，除了结构上的轻微差异外，它与您链接的答案基本上没有什么不同

var queue = null;

function checkInput(elem){
    if(elem.id == 'inpt1')
    {
        clearTimeout(queue);
        queue = setTimeout(runDefault, 500);
    }
    else if(elem.id == 'btn1')
    {
        clearTimeout(queue);
        runButton1();
    }
    else
    {
        clearTimeout(queue);
        runButton2();
    }
}

function runDefault()
{
    alert('default');
}

function runButton1()
{
    alert('Button 1');   
}

function runButton2()
{
    alert('Button 2');   
}

并且只更改了所有侦听器指向相同的控制函数：

<input type="text" id="inpt1" onblur="checkInput(this);" />
<input type="submit" id="btn1" onclick="checkInput(this);" />
<input type="submit" id="btn2" onclick="checkInput(this);" />

它基本上是在超时队列中设置回调函数，并让每个侦听器擦除队列。500毫秒的时间足以清除任何事件，但是的，这仍然是一个不可靠的点。也许这对你来说是一个可以接受的门槛。由你决定

---

*更新以调整OP关于事件排队按钮1和2的评论

preventDefault

？我没有100%理解这个问题，但你搞乱了函数名称我和Ted在一起。您输入了错误的函数名。除此之外，我不明白你的代码没有做什么。我在文本字段上看到一个更改事件，然后在其他字段上单击侦听器。除非您的单击侦听器正在修改文本字段的值，否则这些操作都不应发生干扰。您没有在问题中指定这一点。基本上，我只想触发3个函数中的1个，但我似乎无法阻止在单击两个按钮之一时触发onchange事件，因为它似乎是先执行的。是的，所有3个按钮都会对屏幕上的值进行修改，这会相互干扰。您是否尝试了onkeyup而不是onchange？-除非这可能是一个长期值。我猜你被否决了，因为你刚刚抛出了一些jquery，并称它完成了。OP没有指定jquery，看起来这也不能解决他的问题。它不起作用-如果我输入一些文本并单击第一个按钮，我会得到change（）函数，这与我想要的正好相反。@Elie你能详细说明你想要什么吗。当用户在文本框中输入一些值并单击btn1或btn2时，您希望触发这些按钮事件，并且您希望文本框更改事件何时触发？

keypress

或

keydown

对移动设备不起作用。最好使用

input

。事实上，在我想要触发事件的时候离开输入，所以更改是可以的。我要试试这个，谢谢！我会尝试附加blur（）事件，而不是change（）。根据我的经验，change（）用于选择输入类型。因此，似乎blur（）和onchange（）是首先被调用的。如何反转顺序（或者查看按钮是否被单击，然后就掉下来了）？如果您只想检查输入，我将删除按钮单击事件，并仅使用blur（）事件滚动。谢谢500毫秒可能足够长了，很明显，我们可以根据测试和反馈来摆弄它。就像一个问题——如果用户点击按钮1或2，是否仍然需要定时器？或者在清除超时后，用runButton1（）和runButton2（）分别替换这些行是否安全？不，在这些情况下不需要计时器。只不过是暂停时间。这是这里的关键部分。我只是复制/粘贴，但这是一个很好的选择。