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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28213070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 01:22:57  来源:igfitidea点击:

Disabled button still fires using ".click()"

javascriptjquery

提问by domi

It seems disabled button"onclick" function is still fired when triggering it programmaticaly, eg:

似乎禁用按钮“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();   
}

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

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

In my situation, keyboards shortcuts are bound to functions triggering the ".click()" on buttons. I'll find it very annoying to have to disable the shorcuts or check if the button is disabled myself. I'd prefer a general solution fixing this problem.

在我的情况下,键盘快捷键绑定到在按钮上触发“.click()”的函数。我会发现必须禁用快捷方式或检查自己是否禁用按钮非常烦人。我更喜欢解决这个问题的通用解决方案。

  • But why? This behavior doesn't seem fair to me.
  • Any workaround?
  • 但为什么?这种行为对我来说似乎不公平。
  • 任何解决方法?

回答by Spokey

The attribute only disables user interaction, the button is still usable programmatically.

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

So yeah, you gotta check

所以是的,你必须检查

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

Alternatively don't use inline handlers.

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

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

回答by rtmalone

For future use...the OP code works because jQuery will still call it's own handlers even if the DOM element is disabled. If one were to use vanilla javascript, the disabled attribute would be honored.

为了将来使用...OP 代码有效,因为即使 DOM 元素被禁用,jQuery 仍会调用它自己的处理程序。如果要使用 vanilla javascript,则禁用属性将受到尊重。

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

回答by Vijay

You can programmatically trigger click on a disabled button.

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

There are ways to find if the event is a click on button by user or it has been trigger programmatically. http://jsfiddle.net/WzEvs/373/

有多种方法可以确定事件是用户点击按钮还是以编程方式触发。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();
    });
});

e.isTriggeris true if you call the click()programmatically. Basically you are triggering the click event manually in code.

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

回答by Tushar Raj

You can trigger clickstill although made it disable.As Spokey said it just shows the user-interaction(the usability still persists that can be turned on programmatically) . offor unbindthe click will solve this issue.

click尽管已经成功,您仍然可以触发disable。正如 Spokey 所说,它只显示用户交互(可用性仍然存在,可以通过编程方式打开)。 offunbind单击将解决此问题。

Thanks

谢谢