jQuery 不会在禁用按钮上触发悬停事件吗？
Posted
技术标签:
【中文标题】jQuery 不会在禁用按钮上触发悬停事件吗？【英文标题】：Does jQuery not fire hover event on a disabled button? 【发布时间】：2012-03-16 01:51:17 【问题描述】：我正在实现一个表单，我想禁用 button 并显示一个工具提示，解释为什么它在悬停时被禁用。但是，当 button 被禁用时，工具提示不会显示。
我在这里添加了一个测试用例，仅使用 jQuery 进行复制：http://jsfiddle.net/BYeFJ/1/
好像是jQuery没有触发事件，还是浏览器没有触发悬停事件？
我正在使用 Twitter Bootstrap's Tooltip Module，当然还有 jQuery。
注意：我也尝试过在按钮周围使用包装器 - 但它似乎吞下了悬停状态，我也尝试使用 input 元素，达到同样的效果。
【问题讨论】：
【参考方案1】：这会有所帮助
<style>
.btn
padding: 0 !important; // or get padding size of .btn
.button
padding: 8px 30px 6px;
</style>
<body>
<button type="submit" id="submit_form" class="btn" disabled/>
<div class="button">Submit</div>
</button>
<script>
$('.button').hover(function ()
// place code here
);
</script>
</body>
【讨论】：
【参考方案2】：添加“ui-button-disabled”和“ui-state-disabled”类，使其看起来像一个禁用的按钮，并在点击函数中检查这些以确定状态。当您需要启用的外观时将其删除。
【讨论】：
【参考方案3】：按照詹姆斯的指南，我已经尝试过这样的
<div id="wrapper">
<button id='overlay'>BUTTON</button>
<button disabled>BUTTON</button></div>
#overlay
position: absolute;
opacity: 0;
我在旧按钮前面放了一个带有相同文本的假按钮，并为其设置了 id。在 css 中，我设置了位置，让这个新按钮与 wrapper 相对，这样这个新按钮就会和禁用的按钮放在同一个空间中。
这是我的小提琴： http://jsfiddle.net/p2j041Ln/
【讨论】：
【参考方案4】：一种可能的解决方案是仅使其准备就绪：
<button id="disabledbutton" readonly="readonly">Disabled Button</button>
然后将 css 更改为禁用并覆盖 onclick 以防止任何操作：
$('#disabledbutton').click(function() return false; );
【讨论】：
【参考方案5】：您可以在按钮上放置一个透明覆盖层，然后在上面放置工具提示。
http://jsfiddle.net/yL2wN/
<div id="wrapper">
<div id="overlay"></div>
<button disabled>BUTTON</button>
</div>
#wrapper
position: relative;
#overlay
position: absolute;
top: 0;
left: 0;
opacity: .1;
height: 20px;
width: 70px;
在小提琴中，我将颜色设置为蓝色，这样您就可以看到发生了什么。叠加层的宽度和高度可以根据需要调整或在js中动态化。
【讨论】：
以上是关于jQuery 不会在禁用按钮上触发悬停事件吗？的主要内容，如果未能解决你的问题，请参考以下文章
jquery click 事件不会在 iPhone 中的按钮元素上触发