vb.net 当元素被禁用时触发 onmouseover 事件

Fire onmouseover event when element is disabled

提问by KyleMit

I have some controls that I need to disable when users don't have edit priveleges, but are sometimes not wide enough to show the entire text of the selected option element. In which case I've added a tool tip with ASP.NET and the following code

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

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

This works when the control is enabled, but doesn't work when it is disabled.

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

The following alert will not fire when a mouse is over the select element:

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

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

See this fiddle.

看到这个小提琴。

Q: Can I fire the onmouseoverevent for controls that are disabled?

问：我可以onmouseover为控件触发事件disabled吗？

回答by Diodeus - James MacFarlane

Disabled elements do not fire events, e.g. users cannot hover or click them to trigger a popover (or tooltip). You can however wrap the disabled element with a DIVand listen to the event fired on that element instead.

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

回答by KyleMit

Update: Please see nathan william's commentfor some serious limitations to this approach. I've updated the fiddle to illustrate the problem areas more clearly.

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

---

---

Expanding on what @Diodeussaid, you can use jQueryto automatically create the divcontainer for you and wrap it around any disabled elements.

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

1. Use the :disabledselector to find all disabled elements.
2. Then call the .wrap()method with a function callback
3. You can use thisto refer to the current element in the set.
4. Then use .attr()method to get the onmouseovervalue from the parent element and apply the same value to the new div.

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

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

Demo in jsFiddle

jsFiddle 中的演示

回答by Andres Zapata

I know this is an old post, but in chrome you can set css property pointer-events to all and it should allow for events. I haven't checked in other browsers.

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

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

Edit:

编辑：

Actually I think setting the property to auto is sufficient. As @KyleMit commented, support it's pretty good.

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

I just used this in project where I needed to disable an button until some validation rules where met, but I also needed to trigger the validation on hover over the button. So adding the pointer-events did the trick. I think it's the easiest way get over the problem stated in the OP.

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

回答by Dr4co

I know this is an old post, but hopefully this answer will clarify how @Diodeusanswer can be implemented!

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

Disabled elements do not fire events, e.g. users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you can however wrap a <DIV>or <span>around the disabled element and listen to the event fired on that element instead.

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

NOTE! Using onmouseoverand onmouseoutin the wrapper <DIV>will not work as expected in Chrome (v69). But will however work in IE. Which is why I recommend users to use onmouseenterand onmouseleaveinstead, which is working great both in IE and in Chrome.

笔记！在 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>

I've put together a JS fiddle with some examples here: http://jsfiddle.net/Dr4co/tg6134ju/

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

回答by Justin

Why can't you add a title on the target element? title looks like the same as tool tip. And title works on disabled elements.

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

when you set the value of your select, also set title:

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

element.value=value;
element.title = element.options[element.selectedIndex].text;

回答by Mina Fawzy

there are two solutions for this

对此有两种解决方案

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

or this one if you dont want miss the view

或者这个如果你不想错过景色

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

reference

参考