Вопрос по html, vb.net, onmouseover, javascript-events, asp.net – Запустить событие onmouseover, когда элемент отключен

9

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

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

Это работает, когда контроль включен, но нене работает, когда он отключен.

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


    Disabled

Видеть этоfiddle.Q:

Могу ли я уволитьonmouseover событие для элементов управления, которые есть?disabled

Ваш Ответ

5   ответов
17

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

не могли бы вы продемонстрировать mikewasmike
1

@Diodeus Ответ может быть реализован!

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

 или же<span></span> вокруг отключенного элемента и вместо этого прослушивайте событие, сработавшее на этом элементе.

НОТА! С помощьюonmouseover а такжеonmouseout в обертке

 не будет работать должным образом в Chrome (v69). Но будет работать в IE. Вот почему я рекомендую пользователям использоватьonmouseenter а такжеonmouseleave вместо этого, который прекрасно работает как в I, E и в Chrome.I '

   <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/

10

Обновить: Посмотри пожалуйстаНатан Уильямкомментарий для некоторых серьезных ограничений этого подхода. Я'Мы обновили скрипку, чтобы проиллюстрировать проблемные области более четко.

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

Использовать:disabled селектор, чтобы найти все отключенные элементы.Затем позвоните.wrap() метод с обратным вызовом функцииТы можешь использоватьthis сослаться на текущий элемент в наборе.Тогда используйте.attr() способ получитьonmouseover значение из родительского элемента и применить то же значение к новому div.
$(':disabled').wrap(function() {
    return '';
});
Демо в jsFiddle
Следует отметить, что естьпо-прежнему мертвая зона над самим отключенным элементом. Если оболочка имеет стиль блока, то эффект будет ошибочным; если он имеет встроенный стиль, то мышь никогда не сможет пройти какую-либо его часть, чтобы вызвать эффект. Элемент наложения z-index будет вести себя более согласованно, но потребует вставки элемента-брата с абсолютным позиционированием относительно оболочки. Nathan Williams
1

ит так же, как подсказка. И название работает на отключенных элементах.

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

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

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

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

Редактировать:

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

Я просто использовал это в проекте, где мне нужно было отключить кнопку, пока не встретились некоторые правила проверки, но мне также нужно было запустить проверку при наведении курсора на кнопку. Таким образом, добавление событий указателя сделало свое дело. Я думаю это'Самый простой способ преодолеть проблему, указанную в ОП.

К сожалению, это больше не работает в Chrome. Grim...

Похожие вопросы