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

我有一个禁用按钮，在选中“我接受条款和条件”复选框后启用。 问题是，如果用户单击禁用按钮 ，我想触发警报。 我怎样才能做到这一点？ 如果某个元素被禁用，则看起来“onclick”事件不会被触发。

代码示例：

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

如果我将该元素包装在div中并听取对该div的点击，则它可以正常工作，但您需要在按钮外单击。

我怎样才能解决这个问题？

谢谢

UPDATE。 我设法通过在提交按钮上添加一个假div并在该div上侦听事件来解决这个问题（我还将z-index更改为-200以启用对按钮本身的点击）：

现在它按预期工作

Answer 1

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

小提琴： http ： //jsfiddle.net/6as8b/2/

HTML

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

CSS

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

JS

 $(document).ready(function () { $('#clickable').on('click',function () { if ($('#theButton:disabled').length>0) { $('#clicks').append('|Disabled Button Clicked|
'); } else { //do nothing and let the button handler do it $('#theButton').click(); } }); $('#theButton').on('click',function() { $('#clicks').append('|ENABLED button clicked|
'); }); $('#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'}); } }); }); 

Answer 2

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

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

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

小提琴

Answer 3

你可以编写一个函数来为mousedown和mouseup事件添加监听器，如果目标与你的Node匹配（即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 ); 

DEMO