禁用元素时触发onmouseover事件

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>

看到这个小提琴.

问:我可以onmouseover为控件启动事件disabled吗？

Answer 1

禁用的元素不会触发事件,例如用户不能悬停或单击它们来触发弹出窗口(或工具提示).但是,您可以使用a包装disabled元素,DIV然后侦听在该元素上触发的事件.

Answer 2

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

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

1. 使用:disabled选择器查找所有已禁用的元素.
2. 然后.wrap()使用函数回调调用该方法
3. 您可以使用它this来引用集合中的当前元素.
4. 然后使用.attr()method onmouseover从父元素获取值并将相同的值应用于新div.

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

在jsFiddle演示

Answer 3

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

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

笔记！在 Chrome (v69) 中，在包装器中使用onmouseover和将无法正常工作。但将在 IE 中工作。这就是为什么我建议用户使用和代替，它在 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/