Событие Fire onmouseover, когда элемент отключен

У меня есть некоторые элементы управления, которые мне нужно отключить, когда у пользователей нет прайверов редактирования, но иногда они недостаточно широки, чтобы отобразить весь текст выбранного элемента option. В этом случае я добавил подсказку с ASP.NET и следующий код

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

Это работает, когда элемент управления включен, но не работает, когда он отключен.

Следующее предупреждение не срабатывает, когда мышь находится над элементом select:

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

Смотрите скрипт.

Q: могу ли я запустить событие onmouseover для элементов управления disabled?

ОТВЕТЫ

Ответ 1

Отключенные элементы не запускают события, например, пользователи не могут зависать или щелкать их, чтобы вызвать всплывающее окно (или всплывающую подсказку). Однако вы можете обернуть отключенный элемент с помощью DIV и вместо этого прослушать событие, запущенное для этого элемента.

Ответ 2

Обновить: см. комментарий nathan william для некоторых серьезных ограничений этого подхода. Я обновил скрипт, чтобы более четко иллюстрировать проблемные области.

Развернувшись на @Diodeus, вы можете использовать jQuery, чтобы автоматически создать контейнер div для вас и обернуть его вокруг любого отключенные элементы.

  • Используйте :disabled, чтобы найти все отключенные элементы.
  • Затем вызовите метод .wrap() с функцией обратного вызова функции
  • Вы можете использовать this для ссылки на текущий элемент в наборе.
  • Затем используйте .attr() метод, чтобы получить значение onmouseover от родительского элемента и применить одно и то же значение к новому div.
$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

Демо в jsFiddle

Ответ 3

Я знаю, что это старое сообщение, но в chrome вы можете установить cinter-указатели-события для всех, и это должно допускать события. Я не проверял в других браузерах.

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

Изменить:

На самом деле, думаю, достаточно установить свойство auto. Как комментировал @KyleMit, поддерживайте его довольно хорошо.

Я просто использовал это в проекте, где мне нужно было отключить кнопку до тех пор, пока не будут соблюдены некоторые правила проверки, но мне также нужно было активировать проверку при наведении на кнопку. Таким образом, добавление указателей-событий сделало трюк. Я думаю, что это самый простой способ преодолеть проблему, изложенную в OP.

Ответ 4

Почему вы не можете добавить заголовок в целевом элементе? название выглядит так же, как подсказка. И название работает на отключенных элементах.

когда вы устанавливаете значение своего выбора, также задайте заголовок:

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

Ответ 5

Я знаю, что это старый пост, но, надеюсь, этот ответ прояснит, как можно реализовать ответ @Diodeus !

Отключенные элементы не запускают события, например, пользователи не могут зависать или щелкать их, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути вы можете, однако, обернуть <DIV> или <span> вокруг отключенного элемента и вместо этого прослушать событие, запущенное для этого элемента.

НОТА! Использование onmouseover и onmouseout в 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>

Ответ 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>

ссылка