Javascript 如何在禁用的元素上触发单击事件

我有一个被禁用的按钮，在选中“我接受条款和条件”复选框后启用。 问题是，如果用户单击禁用按钮，我想触发警报。我该怎么做？如果某个元素被禁用，则看起来“onclick”事件未被激发

代码示例：

<input id="subm_tc" class="btn btn-primary" type="submit" disabled="" value="Log in" name="Submit">

    $("#subm_tc").click(function () {
        if($("#modlgn-tc").is(':checked')){
            alert('checked');
        } else {
            alert('unchecked');
        }
    });

$（“#subm_tc”）。单击（函数（）{
如果（$（“#modlgn tc”）。是（':checked'））{
警报（“已检查”）；
}否则{
警报（“未检查”）；
}
});

如果我将元素包装在div中，并听取对该div的单击，它会工作，但您需要在按钮外部单击

我怎样才能解决这个问题

谢谢

更新。我通过在“提交”按钮上添加一个假div并监听该div上的事件（我还将z-index更改为-200以启用对按钮本身的单击），成功地解决了这个问题：

---

现在它可以正常工作了

禁用的元素根本不会触发任何鼠标事件，所以这可能是一个失败的原因

但是，单击父元素时，似乎正确给出了event.target，这意味着这应该可以工作：

$(document).on('click', function (e) {   
    if (e.target.id == 'subm_tc') {
        if($("#modlgn-tc").is(':checked')){
             alert('checked');
        } else {
             alert('unchecked');
        }
    }
});

---

您可以编写一个函数，将侦听器添加到mousedown和mouseup事件中，如果目标与您的节点匹配（即mousedown和后面的mouseup位于您的元素上），那么它将调用另一个函数

function listenFullClick(elm, fn) {
    var last;
    document.addEventListener('mousedown', function (e) {
        last = e.target === elm;
    });
    document.addEventListener('mouseup', function (e) {
        if (e.target === elm && last) fn();
    });
};

listenFullClick(
    document.getElementById('foo'), // node to look for
    function () {alert('bar');}     // function to invoke
);

---

我的解决方案是将按钮放在一个可以单击的div中。当按钮被禁用时，div具有按钮的宽度和高度，因此单击按钮将触发div。当按钮被启用时，div将收缩为0宽度0高度，因此，单击事件注册为按钮而不是div。此代码包括一些演示代码，以及切换按钮的切换代码，该按钮切换相关按钮的启用/禁用状态

小提琴：

HTML

单击“切换”以启用或禁用“按钮”。单击它，可以看到一个事件在启用时触发，另一个事件在禁用时触发

<input type=button value='toggle' id='toggle'><BR>
<div style='position:relative'>
    <div id='clickable'></div>
    <input id=theButton type=button disabled value='Button'>
        </div>
    <div id=clicks></div>

JS

$（文档）.ready（函数（）{
$（'#clickable'）。在（'click'，函数（）{
如果（$（'#按钮：禁用'）。长度>0）
{
$（“#单击”）.append（“|禁用按钮单击|
”）；
}
其他的
{
//什么都不做，让按钮处理程序来做
$（“#按钮”）。单击（）；
}
});
$（'theButton'）。在（'click'，function（）上{
$（“#单击”）.append（“|已启用按钮已单击|
”）；
});
$（'#toggle'）。打开（'click'，function（）{
如果（$（'#按钮：禁用'）。长度>0）
{
$（“#按钮”）.removeAttr（'disabled'）；
$（'#clickable'）.css（{'width'：'0px'，'height'：'0px'}）；
}
其他的
{
$（'theButton'）.attr（'disabled'，'disabled'）；
$（'#clickable'）.css（{'width'：'55px'，'height'：'25px'）；
}
});
});

如果您使用Twitter引导，他们会为您提供一个类

disabled

，该类提供样式，但不会删除

click

事件（还要记住，我想确保当按钮不再被禁用时，最初的点击事件确实会触发，我不想处理解除绑定、重新绑定的问题）

---

})

老话题，但这是我的两分钱，因为我最近遇到了同样的挑战：

不要试图将可单击元素放在其上方，而是用一个元素将其包裹起来，这样您就不能直接单击它。假设按钮带有

display:inline block

set:

在按钮被禁用的情况下定义单击事件：

$（'.on disabled'）。单击（功能（ev）{
//不要对冒出的点击事件做出反应
如果（ev.target！==ev.currentTarget）返回；
//做你的事
警报（“对不起，此按钮已禁用”）；
});

并简单地将按钮样式设置为：

#subm#tc{
显示：内联块；
}
#subm_tc[禁用]{
位置：相对位置；
z指数：-1；
}

这样，即使在按钮被禁用的情况下，您也可以轻松地对单击做出反应。

---

请参阅。

尝试使用

onmousedown

event for disabled元素。浏览器应该以这样的方式呈现禁用按钮：最终用户理解单击按钮是毫无价值的。他们通常在这方面做得很好。也许你的提醒是不必要的。愚蠢的人可能会一直单击到一天结束才意识到这一点安永应勾选“接受条款”“box.concept对用户来说并不直观……如果禁用了它，他们为什么要点击它？那么不要禁用它，并在用户点击它时使用验证来显示错误，这是一个很好的解决方案，但是在按钮周围添加abs位置div会更简单吗？”？查看我的更新。没有意识到#当

本身看不到时，文档仍然从禁用的

接收到单击事件+1.@user2723490-这取决于您，如果您认为添加一个具有绝对位置的元素，然后隐藏和显示该元素等比此事件处理程序更容易，那么对您来说，它在Webkit中工作，但在Firefox中显然不工作！最后，在测试了所有这些选项之后，我最终得到了更新的解决方案（见我的帖子）更新。它与您的非常相似，并且更简单，因为我们使用z-index只是来回移动可点击的div。无论如何，谢谢。啊，是的，我认为大小为0或翻转z-索引是差不多的事情，不管你的喜好是什么。

<input type=button value='toggle' id='toggle'><BR>
<div style='position:relative'>
    <div id='clickable'></div>
    <input id=theButton type=button disabled value='Button'>
        </div>
    <div id=clicks></div>

#clickable{
position:absolute;
    width:55px;
    height:25px;
}

$(document).ready(function () {
    $('#clickable').on('click',function () {
        if ($('#theButton:disabled').length>0)
        {
        $('#clicks').append('|Disabled Button Clicked|<br>');
        }
        else
        {
            //do nothing and let the button handler do it
            $('#theButton').click();
        }
    });
    $('#theButton').on('click',function() {
        $('#clicks').append('|ENABLED button clicked|<br>');
    });
        $('#toggle').on('click',function() {
       if ($('#theButton:disabled').length>0)
        {
            $('#theButton').removeAttr('disabled');
            $('#clickable').css({'width':'0px','height':'0px'});
        }
            else
            {
                $('#theButton').attr('disabled','disabled');
                $('#clickable').css({'width':'55px','height':'25px'});
            }
    });
});

function disableButton(btn, message) {
  btn.addClass("disabled")
  if (!(message == null || message == "")) {
    btn.data("message", message)
  }
}

function enableButton(btn) {
  btn.removeClass("disabled")
}

$("#btn").click(function() {
  if (!($(this).hasClass("disabled"))) {
    // original, desired action
  } else {
    message = $(this).data("message")
    if (!(message == null || message == "")) {
      alert(message)
    }
  }