21

当用户没有编辑权限时，我需要禁用一些控件，但有时它们的宽度不足以显示所选选项元素的整个文本。在这种情况下，我添加了一个带有 ASP.NET 的工具提示和以下代码

ddl.Attributes.Add("onmouseover", "this.title=this.options[this.selectedIndex].title")

这在启用控件时有效，但在禁用时不起作用。

当鼠标悬停在选择元素上时，不会触发以下警报：

<select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
</select>

看到这个小提琴。

问：我可以onmouseover为那些是的控件触发事件disabled吗？

4

6 回答 6

41

禁用的元素不会触发事件，例如用户不能悬停或单击它们来触发弹出框（或工具提示）。但是，您可以用 a 包装禁用的元素，DIV然后改为监听在该元素上触发的事件。

于 2013-08-07T21:16:40.917 回答
10

更新：有关此方法的一些严重限制，请参阅nathan william 的评论。我已经更新了小提琴以更清楚地说明问题区域。

扩展@Diodeus所说的内容，您可以使用jQuery自动div为您创建容器并将其包装在任何禁用的元素周围。

  1. 使用:disabled选择器查找所有禁用的元素。
  2. 然后.wrap()用函数回调调用方法
  3. 您可以使用this来引用集合中的当前元素。
  4. 然后使用.attr()方法onmouseover从父元素中获取值并将相同的值应用于新的 div。
$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

jsFiddle 中的演示

于 2013-08-07T22:12:19.293 回答
5

我知道这是一篇旧帖子，但希望这个答案能阐明如何@Diodeus实施答案！

禁用的元素不会触发事件，例如用户不能悬停或单击它们来触发弹出框（或工具提示）。作为一种解决方法，您可以将一个<DIV>or包裹<span>在禁用的元素周围，并改为监听在该元素上触发的事件。

笔记！在 Chrome (v69) 中，在包装器中使用onmouseoverand将无法正常工作。但将在 IE 中工作。这就是我推荐用户使用and的原因，它在 IE 和 Chrome 中都很好用。onmouseout<DIV>onmouseenteronmouseleave

   <select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
  </select>

  <div onmouseenter="alert('hi');">
    <select disabled="disabled" onmouseover="alert('hi');">
      <option>Disabled with wrapper</option>
    </select>
  </div>

我在这里整理了一个带有一些示例的 JS 小提琴：http: //jsfiddle.net/Dr4co/tg6134ju/

于 2018-10-26T11:55:20.593 回答
2

我知道这是一篇旧文章，但在 chrome 中，您可以将 css 属性指针事件设置为 all，它应该允许事件。我还没有检查其他浏览器。

button[disabled] {
  pointer-events: all;
}

编辑：

实际上我认为将属性设置为 auto 就足够了。正如@KyleMit 评论的那样，支持它非常好。

我只是在项目中使用了这个，我需要禁用一个按钮，直到满足一些验证规则，但我还需要在将鼠标悬停在按钮上时触发验证。所以添加指针事件就可以了。我认为这是解决 OP 中所述问题的最简单方法。

于 2016-12-30T17:34:00.220 回答
1

为什么不能在目标元素上添加标题？标题看起来与工具提示相同。标题适用于禁用元素。

当您设置选择的值时，还要设置标题：

element.value=value;
element.title = element.options[element.selectedIndex].text;
于 2016-01-19T14:28:48.810 回答
-1

有两种解决方案

<Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

或者这个如果你不想错过视图

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

参考

于 2019-07-23T21:37:38.770 回答