禁用按钮仍然监听点击事件

2022-01-24 00:00:00 jquery javascript coffeescript

我在进行一些 jquery 验证的表单中遇到问题.如果未填写特定输入字段，则应通过添加禁用属性来禁用前进"按钮:

I have a problem in a form where I do some jquery validations. If a specific input field is not filled out, it should disable a "step forward" button by adding a disabled attribute:

if errors
  $('.btn-move-forward').attr("disabled", true)

这可行，但我在该按钮上也有一个点击事件:(咖啡稿)

that works but I also have a click event on that button: (coffeescript)

$('.btn-move-forward').click ->
  $('#step2, #step3').toggle()

我希望 .btn-move-forward 在按钮被禁用时不会触发点击事件，但它确实会触发！！

I expect .btn-move-forward to not fire the click event when the button is disabled but it does!!

首先:我不明白为什么，因为每个浏览器规范都定义不应该发生这种情况.无论如何，我尝试通过执行以下操作来绕过它:

First: I don't understand why because every browser spec defines that this should not happen. Anyways, I tried to bypass it by doing the following stuff:

$('.btn-move-forward').click ->
  if !$(this).is(:disabled)
    $('#step2, #step3').toggle()

或者这个

$('.btn-move-forward').click ->
  if $(this).prop("disabled", false)
    $('#step2, #step3').toggle()

或者像这样组合事件监听器:

or combining the event listeners like this:

$('.btn-move-forward').on 'click', '.btn-move-forward:enabled', ->
   $('#step2, #step3').toggle()

不，所有这些都无法正常工作.该按钮仍用作向前移动按钮.

No, all of this won't work properly. The button still behaves as a move-forward button.

我想要的只是按钮不监听 onclick 如果它被禁用.

All I want is the button not listening to onclick if it is disabled.

推荐答案

disabled 属性仅适用于表单元素.这意味着除非 .btn-move-forward 元素是

相关文章