时间戳

首页 > 解决方案 > 动态添加一个选择元素到div，mousedown事件阻止下拉菜单打开

javascript - 动态添加一个选择元素到div，mousedown事件阻止下拉菜单打开

问题描述

有一个 DIV 元素（id：容器），它附加了一个 mousedown 事件处理程序。然后我使用 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/

标签： javascriptjquery

解决方案

您可以e.stopPropagation()在selectmousedown 事件上使用

$("#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>

推荐阅读