分到救援！

Question

这应该非常简单：

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled=false;">

如果我将鼠标光标放在此按钮上，它会被禁用..好吧！但是现在当我把光标移出时，它没有启用......嘘。

我理解禁用它的概念意味着你无法用它做任何事情。但是如何通过鼠标启用它？可能吗？我错过了什么吗？

Answer 1

您应该将mouseout设置为disabled = ''。

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

禁用的财产只会查看它是否存在。您可以设置disabled ='anything'，它将被禁用。过去，您只需要在属性中使用关键字disabled，但对于有效的XHTML，您需要将每个属性设置为等于某个属性。

修改我稍微玩了一下，并在SPAN标签中添加了一些填充，它允许事件正常工作。没有填充，它不会捕获事件，因为输入按钮被禁用。我刚刚将背景设为红色，因此很容易看到SPAN用完的区域。

<span style="padding: 8px; background: red;" onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>

Answer 2

分到救援！

太糟糕没有人真正回答过这个问题。可以做*。

<div style="display: inline-block; position: relative">
<input type="button" id="button" disabled="disabled">
<div id="buttonMouseCatcher" style="position:absolute; z-index: 1;
  top: 0px; bottom: 0px; left: 0px; right: 0px;">
</div>

然后：

在buttonMouseCatcher上放置一个鼠标悬停处理程序：
- 将其z-index更改为-1和
- 启用按钮。
将鼠标悬停处理程序放在按钮上：
- 将buttonMouseCatcher的z-index更改回1和
- 禁用按钮。

Answer 3

禁用表单元素不会按规范触发鼠标事件。

我用作解决方法的方法是使用“禁用”类来模拟禁用的行为，并将事件句柄与之关联。适用于按钮，但我认为它不适用于文本输入和复选框。

Answer 4

你可以有一个围绕它的外部元素，并为该外部元素设置一个onmouseover，以启用内部元素。

Javascript：使用mouseover / mouseout启用/禁用按钮

4 个答案:

分到救援！