asp.net 元素被禁用时激发onmouseover事件

a11xaf1n  于 2023-05-19  发布在  .NET
关注(0)|答案(7)|浏览(209)

我有一些控件,当用户没有编辑权限时,我需要禁用它们,但有时它们不够宽,无法显示所选选项元素的整个文本。在这种情况下,我添加了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

Q:* disabled控件是否可以触发onmouseover事件?*

dauxcl2d

dauxcl2d1#

禁用的元素不会触发事件,例如用户不能悬停或单击它们来触发弹出框(或工具提示)。但是,您可以使用DIV Package 禁用的元素,并侦听在该元素上触发的事件。

guicsvcw

guicsvcw2#

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

扩展@Diodeus所说的,您可以使用jQuery自动为您创建div容器,并将其 Package 在任何禁用的元素周围。
1.使用:disabled选择器查找所有禁用的元素。
1.然后使用函数回调调用.wrap()方法
1.您可以使用 * this * 来引用集合中的当前元素。
1.然后使用.attr()方法从父元素中获取onmouseover值,并将相同的值应用于新的div。

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

Demo in jsFiddle

szqfcxe2

szqfcxe23#

我知道这是一个老帖子,但希望这个答案将澄清如何@Diodeus答案可以实现!
禁用的元素不会触发事件,例如用户不能悬停或单击它们来触发弹出框(或工具提示)。作为一种解决方法,您可以在禁用的元素周围 Package 一个<DIV><span>,并侦听在该元素上触发的事件。
注意!在 Package 器<DIV>中使用onmouseoveronmouseout将无法在Chrome(v69)中正常工作。但会在IE中工作。这就是为什么我建议用户使用onmouseenteronmouseleave,这在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/

ufj5ltwl

ufj5ltwl4#

为什么不能在目标元素上添加标题?标题看起来与工具提示相同。和标题工程残疾人的元素。
当你设置select的值时,也要设置title:

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

5sxhfpxr5#

我知道这是一个老帖子,但在chrome中你可以设置css属性pointer-events为all,它应该允许事件。我没有检查其他浏览器。

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

编辑:
实际上,我认为将属性设置为auto就足够了。正如@KyleMit评论的那样,支持它非常好。
我只是在项目中使用了这个,我需要禁用一个按钮,直到满足一些验证规则,但我还需要在按钮上悬停时触发验证。所以添加指针事件就成功了。我认为这是克服OP中提出的问题的最简单的方法。

58wvjzkj

58wvjzkj6#

对于modern browsers,可以使用pointerenterpointerleave事件。即使HTML元素是disabled,这些也会触发。

gjmwrych

gjmwrych7#

对此有两种解决方案

<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

相关问题