Question

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

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

这在启用控件时有效，但在禁用时无效。

当鼠标位于select元素上时，以下警告不会触发：

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

请参阅此fiddle。

问：我是否可以针对onmouseover的控件触发disabled事件？

Answer 1

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

Answer 2

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

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

使用:disabled选择器查找所有已禁用的元素。
然后使用函数回调

.wrap()

您可以使用 this 来引用该集中的当前元素。
然后使用.attr()方法从父元素中获取onmouseover值，并将相同的值应用于新div。

$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

Demo in jsFiddle

Answer 3

我知道这是一个旧帖子，但是在chrome中你可以将css属性指针事件设置为all，它应该允许事件。我还没有在其他浏览器中查看过。

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

编辑：

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

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

Answer 4

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

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

_.defer

Answer 5

我知道这是一篇过时的文章，但是希望这个答案将阐明如何实现@Diodeus答案！

禁用的元素不会触发事件，例如用户无法悬停或单击它们来触发弹出窗口（或工具提示）。作为解决方法，您可以将<DIV>或<span>包装在禁用的元素周围，然后监听在该元素上触发的事件。

注意！在包装onmouseover中使用onmouseout和<DIV>在Chrome（v69）中无法正常工作。但是将在IE中工作。这就是为什么我建议用户改用onmouseenter和onmouseleave的原因，这在IE和Chrome中都很好用。

   <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/

Answer 6

有两种解决方案

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

或如果您不想错过这个景色，

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

reference

禁用元素时触发onmouseover事件

6 个答案:

Demo in jsFiddle