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

Question

Есть элемент DIV (id: container), к которому прикреплен обработчик события mousedown. Затем я добавил в него элемент select, используя document.createElement (...) и append (...). Проблема в том, что раскрывающийся список не открывается, когда я нажимаю на стрелку элемента выбора. Обратите внимание, что элемент контейнера является частью существующей веб-страницы / crm. Это не может быть изменено.

// container:
$("#container").on('mousedown.something', function (event) {
    event.preventDefault();
    // some other code
});

// append a select to the container
var numbers = ["Numbers", "1", "2", "3"];

           var list = document.createElement('select');

           list.setAttribute("id", "dropdown");
           for (var i = 0; i < numbers.length; i++) {
               var opt = document.createElement('option');
               opt.innerHTML = numbers[i];
               opt.value = numbers[i];
               list.appendChild(opt);
           }
$('#container').append(list);

Jsfiddle : https://jsfiddle.net/tomsx/8tLjcgbh/

javascript jquery

0

smolo 2 Май 2019 в 11:49

Answer 1

Вы можете использовать e.stopPropagation() для select события mousedown

$("#container").on('mousedown.something', function(event) {   
  event.preventDefault();
  console.log('MouseDown');
 // some other code
});

var numbers = ["Numbers", "1", "2", "3"];

          var list = document.createElement('select');

          list.setAttribute("id", "dropdown");
          for (var i = 0; i < numbers.length; i++) {
              var opt = document.createElement('option');
              opt.innerHTML = numbers[i];
              opt.value = numbers[i];
              list.appendChild(opt);
          }
$('#container').append(list);

//stop the container mousedown from the created select
$('#container').on('mousedown' , '> select' , function(e){
  e.stopPropagation();
});

#container {
  width: 200px;
  margin: auto;
  border: 3px solid #73AD21;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">Click me</div>

1

Mohamed-Yousef 2 Май 2019 в 09:19

Answer 2

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

 $("#container").on('mousedown.something', function(event) {   
 if($(event.target).is('#container')) {
        event.preventDefault();
   // some other code
}
});

0

madalinivascu 2 Май 2019 в 08:57

Answer 3

Ссылка: https://developer.mozilla.org/en- США / документы / Web / API / EventTarget / addEventListener

passive: логическое значение, которое, если true, указывает, что функция, указанная слушателем, никогда не будет вызывать protectDefault (). Если пассивный прослушиватель вызывает функцию protectDefault (), пользовательский агент не будет ничего делать, кроме как создать предупреждение консоли. Посмотрите Улучшение производительности прокрутки с пассивными слушателями, чтобы узнать больше.

Поэтому вам нужно установить пассив: истина в addEventlistener

var numbers = ["Numbers", "1", "2", "3"];
var list = document.createElement('select');
list.setAttribute("id", "dropdown");
for (var i = 0; i < numbers.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = numbers[i];
    opt.value = numbers[i];
    list.appendChild(opt);
}
$('#container').append(list);
$("#container").on('mousedown.something', function (event) {
   event.preventDefault();
    // some other code
},{passive:true});

0

Andy Tsou 2 Май 2019 в 09:20

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

3 ответа

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

Новые вопросы

javascript