javascript - 使用 javascript 或 jquery 在禁用按钮上执行单击事件

Question

我有一个表单，其中有一个禁用按钮。当用户单击该按钮时，我想显示警报消息。

我的表单代码:-

      <form>
       <input type="button" id="btn" value="Click" disabled>
       </form>

jquery 代码:-

         <script src="path of jquery">
        <script type="text/javascript">

         $(document).on('click',function(e){
         if(e.target.id == "btn" && e.target.disabled){
         alert("The button is clicked.");
         }
          });
        </script>

以上代码在除 google chrome 之外的任何浏览器中均无效。 请告诉我如何制作。

Answer 1

Firefox，或许还有其他浏览器，会禁用禁用的表单字段上的 DOM 事件。从禁用的表单字段开始的任何事件都将被完全取消，并且不会向上传播 DOM 树。如果我错了，请纠正我，但是如果您单击禁用按钮，则事件源是禁用按钮，并且单击事件将完全消失。浏览器实际上不知道按钮被单击，也不传递单击事件。就好像您点击网页上的黑洞一样。

解决方法:

设置日期字段的样式，使其看起来就像已禁用一样。 创建一个带有位值的隐藏“use_date”表单字段，以确定在处理过程中是否使用日期字段。 向日期字段的 onClick 添加新函数，这会将样式类更改为启用状态，并将“use_date”值设置为 1。

另一种方式

使用只读而不是禁用

至少对于复选框来说，这会使它们看起来被禁用，但行为正常(在 Google Chrome 上测试)。您必须捕获点击并根据需要阻止事件的默认操作。

您可以在提交按钮周围放置一个 div，并在禁用提交按钮时附加一个点击功能:

<div id="sub-div"><input type="submit"><div>

$('sub-div').click(function(event){
if (attr('submit-button', 'disabled') == 'true')
{
alert('Button Disabled')
}
});

这只是我脑海中的代码，因此可能不完全正确。但你明白了重点