Отключить события, запускаемые в элементе управления HTML <SELECT>

Question

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

Могу ли я прикрепить пользовательскую функцию к этому событию и перенаправить на нее обработку события вместо кода по умолчанию, открывающего раскрывающийся список?

Спасибо

Answer 1

onclick, onmousedown и onmouseup не помогут вам предотвратить открытие окна выбора. Я не спрашиваю, почему вы хотите это сделать, но если вы действительно не можете использовать любое другое решение, например, например (изменение selectbox на readonly inputbox), тогда вы можете попробовать следующее решение.

Одним из способов предотвращения открытия окна является создание оверлейного контейнера, который будет блокировать фокусируемую область выделения. Этого можно добиться, поместив div после поля выбора и указав его размеры и положение в окне выбора.

<div style="position:relative;">
    <select style="width:100px;height:30px">
        <option>hello</option> 
    </select>
    <div style="position:absolute;
          left:0;
          top:0;
          width:100px;
          height:30px;
          z-index:2;
          background-color:black;
          opacity:0;filter:Alpha(Opacity='0');"
    ></div>
</div>

Событие тогда, оно будет работать только для IE> = 7. Не для IE6, потому что селекторные блоки в IE6 странные (возможно, вы можете попытаться исправить IE6 с помощью некоторого хака iframe);

Answer 2

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

В этом случае событие onclick произойдет слишком поздно, чтобы вы не смогли отобразить фактическое раскрывающееся меню. То, что вы хотите сделать, это привязать к событию mousedown и предотвратить распространение события на поведение по умолчанию:

document.getElementById('my_select_id').onmousedown = function(event) {
   // ... do something here...perhaps display your own custom menu, an advanced selection chooser, focus another element, display a message, or some other custom handling.
   event.preventDefault(); // This prevents the drop-down menu from displaying
}

Примечания:

• Замена выпадающего меню на элемент, разработанный пользователем (как это было предложено другими), не всегда возможен. В некоторых случаях вам придется либо полностью исключить раскрывающиеся списки по умолчанию / система на своем сайте (в пользу элемента, созданного по индивидуальному заказу), либо вам придется мириться с несоответствием внешнего вида из-за браузера / системы / Различия тем (если вы не хотите разрабатывать пользовательский элемент для соответствия каждой мыслимой визуальной эстетике / теме.)
• Отключение раскрывающегося списка не будет работать, так как это предотвратит срабатывание обработчиков событий.
• Использование optgroups по-прежнему позволяет отображать раскрывающееся меню.
• При замене раскрывающегося списка на пустую версию все равно будет отображаться пустое раскрывающееся меню.

Answer 3

вам нужно установить флажок выбора для отключения по нагрузке: disabled="disabled"

Answer 4

Это ответ, который я дал на другой, похожий вопрос.

Это прекрасно работает для меня в IE и Chrome, нет мерцания или чего-либо еще:

HTML

<select id="MySelect"><option>Hello</option></select>

JS

MySelect.onmousedown = function ()
{
    window.setTimeout(function () 
    { 
        //- An immediate blur, then refocus stops the options from being displayed
        this.blur();
        this.focus();
        //- so now we run our custom function
        runOtherFunctionInstead(); 
    },0);
}

Убедитесь, что js запускается после синтаксического анализа элемента select, поместив его в onload или ondocumentready или блок скрипта после элемента select. Не пробовал это в Firefox или Opera. Предположительно, это сработает в Safari.

EDIT
Как предлагается в комментариях, всплывающее окно по-прежнему будет отображаться для двойного щелчка в IE (все версии). Это связано с ошибкой , когда событие mousedown не срабатывает при втором щелчке (упс). Вы можете быстро снова скрыть параметры, используя метод размытия, фокусировки в событии ondblclick, и если этот метод работает в Firefox и Safari, я все же думаю, что это лучшее решение, учитывая, что большинство людей не щелкают дважды по полям выбора. *