Запустить событие onmouseover, когда элемент отключен

8

У меня есть некоторые элементы управления, которые мне нужно отключить, когда у пользователей нет прайверов редактирования, но иногда они недостаточно широки, чтобы отобразить весь текст выбранного элемента 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?

Теги:
javascript-events
onmouseover

4 ответа

15
Лучший ответ

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

Поделиться
  • 1
    не могли бы вы продемонстрировать
10

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

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

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

Демо в jsFiddle

Поделиться
  • 1
    Следует отметить, что над отключенным элементом все еще остается мертвая зона. Если оболочка имеет стиль блока, то эффект будет ошибочным; если он имеет встроенный стиль, то мышь никогда не сможет пройти какую-либо его часть, чтобы вызвать эффект. Элемент наложения z-index будет вести себя более согласованно, но потребует вставки элемента-брата с абсолютным позиционированием относительно оболочки.
3

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

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

Изменить:

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

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

Поделиться
  • 1
    К сожалению, это больше не работает в Chrome.
1

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

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

element.value=value;
element.title = element.options[element.selectedIndex].text;
Поделиться
  • 0
    Джастин, это один из способов (с которым, я думаю, я мог бы в конечном итоге пойти) - проблема в том, что есть много селекторов, которые условно отключены. Мне нужно было навести курсор мыши, чтобы заголовок обновлялся соответствующим образом, когда он не был отключен. Но заполнение с правильным названием для начала охватывает оба случая.
  • 0
    В Kylemit вы можете добавить для него условие: if (element.classList.contains ("addTitle15")) {// добавить заголовок

Ещё вопросы

Сообщество Overcoder
Наверх
Меню