Question

我有一个输入字段，用于执行一些计算。用户可以单击2个按钮来指示他们想要执行哪组计算。但是，如果用户没有单击任何一个按钮，我想要执行默认操作：

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();" />

我可以按按钮执行操作，如in this question所述，但它不可靠。当点击其中一个按钮时，是否有一个更简单的解决方案来阻止onchange事件被触发？

要澄清：当用户完成编辑输入字段时，如果没有单击任何按钮，则执行noButtonClicked()。如果单击其中一个按钮，则执行与按钮关联的功能，但不执行noButtonClicked()功能。

Answer 1

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

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的评论

Answer 2

我更喜欢使用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');
});

http://jsfiddle.net/habo/ukz37ztc/1/

Answer 3

我把它设置得有点不同。使用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（）事件仅在用户离开输入（模糊）后才会触发。如果您想跟踪更改，I might suggest keypress or keydown event.

希望这有帮助！

JSFiddle

单击按钮时，Javascript onchange事件被阻止

3 个答案: