Щелчок по отключенному элементу выбора не вызывает события щелчка или mousedown на его родительском

Question

Отключенные элементы, такие как <select> и <input>, не реагируют на событие click, я пытаюсь их обернуть в <div> и прослушать его событие click.

Нажав на отключен <input>, запускается щелчок по контейнеру <div>, но возникает проблема с элементами <select>. нажатие отключенного элемента <select> не вызывает его контейнер <div>, как вы можете видеть в этом JSFiddle Example.

HTML:

<button onclick="buttonClick()" >Click</button> 
<div id="test"></div> 

ЯШ:

buttonClick = function(){ 
    var editor = $("#test"); 

    var div=$("<div>") 
     .mousedown(function() { 
      alert("!!!"); 
     }) 
     .appendTo(editor); 

    var selecttest = $("<select>") 
     .attr("disabled", "disabled") 
     .appendTo(div); 
    $("<option />").attr("value", '').appendTo(selecttest); 
}; 

Если я добавить <input> используя следующий код вместо <select>, он работает:

var textinput = $("<input>") 
     .attr("type", "text") 
     .attr("disabled", "disabled") 
     .appendTo(div); 

тесты для различных браузеров: Для IE11: для обоих input и select он работает.

Для Firefox: для обоих input и select он не работает.

Для Opera и Chrome: для input он работает, для select он не работает.

Answer 1

Событие mousedown не срабатывает при отключенном вводе или выборе элементов или любом событии мыши на отключенных элементах. Вот ваш пример, и он добавляет элемент ввода и выбора, попробуйте нажать на них, он не будет вызывать предупреждение. Я сделал div с фоном красного цвета, чтобы вы могли видеть, где он находится, поэтому, если вы нажмете только на красную часть, он будет стрелять.

Так что ваше утверждение о том, что MouseDown событие вызывается на инвалидов поле ввода, но не на выбор отключен ложна :)

var buttonClick = function() { 
 
    var editor = $("#test"); 
 

 
    var div = $("<div>") 
 
    .mousedown(function() { 
 
     alert("!!!"); 
 
    }) 
 
    .appendTo(editor); 
 

 
    var textinput = $("<input>") 
 
    .attr("type", "text") 
 
    .attr("disabled", "disabled") 
 
    .appendTo(div); 
 

 
    var selecttest = $("<select>") 
 
    .attr("disabled", "disabled") 
 
    .appendTo(div); 
 
    $("<option />").attr("value", '').appendTo(selecttest); 
 

 
};

select { 
 
    width: 200px; 
 
} 
 
button { 
 
    width: 70px; 
 
    height: 21px; 
 
} 
 
#test div { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 

 

 
<button onclick="buttonClick()">Click</button> 
 
<div id="test"></div>

Answer 2

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

Кроме того, в вашем коде есть ошибка.

Я исправил ошибку в вашем коде. Сценарий, упомянутый в вашем вопросе, не будет реагировать на событие click, так как select отключен. Если вы измените disbaled на readonly, тогда это сработает.

buttonClick = function(){ 
    var editor = $("#test"); 

    var div=$("<div>") 
     .mousedown(function() { 
      alert("!!!"); 
     }) 
     .appendTo(editor); 

    var selecttest = $("<select>") 
     .attr("readonly", "true") 
     .appendTo(div); 
    $("<option />").attr("value", '').appendTo(selecttest); 
}; 

Смотрите эту скрипку - http://jsfiddle.net/Ashish_developer/5d4qewps/1/