禁用按钮仍然使用“.click(）”触发

Disabled button still fires using ".click()"

本文关键字：触发 click 按钮      更新时间：2023-09-26
似乎

禁用按钮"onclick"函数在以编程方式触发时仍然被触发，例如： 

<div>
   <input type="button" onclick="save()" id="saveButton"    value="save"  disabled="disabled" />
   <input type="button" onclick="byPassDisabled()" value="bypass disabled button"/>
<div id="counter">0</div>


function save(){
    var count = parseInt($('#counter').html());
    $('#counter').html(++count);
}
function byPassDisabled(){
     $('#saveButton').click();   
}

见 http://jsfiddle.net/WzEvs/363/

在我的情况下，键盘快捷键绑定到触发按钮上的".click（）"的功能。我会发现必须禁用 shorcut 或检查按钮是否被自己禁用非常烦人。我更喜欢解决此问题的通用解决方案。

  • 但是为什么？这种行为对我来说似乎不公平。
  • 有什么解决方法吗？

该属性仅禁用用户交互，该按钮仍可通过编程方式使用。

所以是的，你必须检查 

function byPassDisabled(){
    $('#saveButton:enabled').click();   
}

或者，不要使用内联处理程序。

$(document).on('click', '#saveButton:enabled', function(){
    // ...
});

供将来使用...OP 代码之所以有效，是因为即使禁用了 DOM 元素，jQuery 仍然会调用它自己的处理程序。如果使用香草javascript，则禁用的属性将得到尊重。

const element = document.getElementById('saveButton');
element.click() //this would not work

您可以通过编程方式触发对禁用按钮的单击。

有多种方法可以查找事件是用户单击按钮还是以编程方式触发。 http://jsfiddle.net/WzEvs/373/

$(function () {
    $("#saveButton").on('click', function (e) {
        if (!e.isTrigger) {
            var count = parseInt($('#counter').html());
            $('#counter').html(++count);
        }
    });
    $("#bypassButton").on('click', function (e) {
        $("#saveButton").click();
    });
});

如果以编程方式调用click()，则e.isTrigger为真。基本上，您是在代码中手动触发单击事件。

尽管disable，您仍然可以触发click。正如 Spokey 所说，它只是显示用户交互（可用性仍然存在，可以通过编程方式打开）。 off或unbind点击即可解决此问题。

谢谢

相关文章：