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

9

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

Ваш Ответ

5   ответов
17

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

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

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

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

НОТА! С помощьюonmouseover а также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>

Я собрал скрипку JS с некоторыми примерами здесь:http://jsfiddle.net/Dr4co/tg6134ju/

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...
10

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

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

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

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